在 IE 中引导选择加载时间过长答案

【问题标题】：Bootstrap select loading takes too long in IE在 IE 中引导选择加载时间过长
【发布时间】：2017-05-01 15:39:30
【问题描述】：

我正在将 1000 条记录加载到引导选择下拉列表中。在 Chrome 中大约需要 2 秒，但在 IE 9 中需要 30 秒。另外，取消或取消 IE 中的引导模式也需要 10+s。 API调用没问题，但是渲染太慢了；谁能给我一些指导？

所以我正在加载客户列表并设置选定的客户。这是代码。

    var customerPicker = $('#customer-picker');
    API.getCustomers().then(function (result) {
        loadDropdown(customerPicker, result.customers); 

        // set the selected to current customer; it takes 10s in IE
        customerPicker.val(currentCustomerId).selectpicker('refresh'); 

        // it takes about 10s in IE too. selector is the bs modal div
        $(selector).css('z-index', '1060').modal('show'); 
    }).catch(function (errorMessage) {
        ToastManager.showError(errorMessage || 'An error occurred while loading customer list. Please try again.');
    });

    function loadDropdown($div, arr) {
        var options = '';
        $.each(arr, function (i, item) {
            options = options + '<option value="' + item.Value + '">' + item.Text + '</option>';
        });
        $div.html(options);
    }

【问题讨论】：

您是否尝试过在循环中使用$div.append('<option ...>') 来替代生成大的options 字符串？
您使用的是什么版本的 jQuery？你很有可能通过尝试不同的 jQuery 版本来解决这个问题，因为你提到的两个函数都直接处理 js。
在 github 上快速搜索此 repo 的问题表明，缺乏大型数据集的性能：github.com/silviomoreto/bootstrap-select/issues 可能希望寻找一种不同的解决方案来处理您正在呈现的选项数量。
尝试延迟加载。分块加载数据。
使用选择来呈现 1000 条记录通常不会为用户提供最佳 UI。通常不欢迎滚动浏览那么多记录。您是否可以考虑使用自动完成下拉菜单，以便用户开始输入名称然后您过滤并显示所有匹配的记录？

标签： jquery twitter-bootstrap bootstrap-modal bootstrap-select

【解决方案1】：

Jquery 在旧版浏览器中可能会遇到性能问题。 Here's a solution 与您正在经历的类似。 $.each() 与原生 JS 相比已经相当慢了。

【讨论】：

【解决方案2】：

也许您希望考虑一个序列化库来处理它一次真正加载的记录数。 Clusterize.js 是一个制作精良的，只允许浏览器呈现当前正在被客户端查看的内容。它可以显示以这种方式处理的多达 100,000 多条记录。

https://clusterize.js.org/

【讨论】：

【解决方案3】：

您是否尝试过在循环内设置 innerHTML；

 $div[0].innerHTML += '<option value="' + item.Value + '">' + item.Text + '</option>';

最后不是这个。;

 $div.html(options);

【讨论】：

【解决方案4】：

你可以使用：
Select2 种加载 1000+ 记录的实用程序不是一个好主意。
https://select2.github.io/examples.html

【讨论】：