如何减少下拉列表中项目的加载时间

Question

我正在尝试将 100 000 个项目加载到按钮单击事件的下拉列表中。但是加载太慢了。如何减少物品的加载时间？

产品循环

    for (int i = 0; i < 100000; i++) {
        out.print("<option>Product" + i + "</option>");
    }

阿贾克斯

    <script>
        function getproduct() {
            var output;
            var xhtp = new XMLHttpRequest();
            xhtp.onreadystatechange = function () {
                if (xhtp.readyState === 4 && xhtp.status === 200)
                    output = output +xhtp.responseText;
                   }
                }
                document.getElementById("product").innerHTML = output;
            }
            xhtp.open("post", "ProductController", true);
            xhtp.send();
        }
 </script>

Answer 1

包含 100,000 个元素的下拉菜单不是好的用户体验。我建议您改为提供typeahead 功能。

与其一次性获取所有内容，不如构建一个搜索 API，用于过滤结果。您的 UI 应为用户提供搜索选项（部分匹配或完全匹配，根据您的喜好），并在搜索时显示相关搜索结果以供用户选择，作为下拉菜单。

您可以优化这种“加载所有内容”场景的唯一方法是您是否可以进行增量加载。您的数据供应商 API/方法应该以较小的大小（例如 500 个）为您提供数据，并且对于每个成功的请求，您都可以将数据附加到下拉菜单中。这样，在填充所有选项之前不会阻止渲染。