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

Posted

技术标签:

【中文标题】在 IE 中引导选择加载时间过长【英文标题】:Bootstrap select loading takes too long in 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('&lt;option ...&gt;') 来替代生成大的options 字符串? 您使用的是什么版本的 jQuery?你很有可能通过尝试不同的 jQuery 版本来解决这个问题,因为你提到的两个函数都直接处理 js。 在 github 上快速搜索此 repo 的问题表明,缺乏大型数据集的性能:github.com/silviomoreto/bootstrap-select/issues 可能希望寻找一种不同的解决方案来处理您正在呈现的选项数量。 尝试延迟加载。分块加载数据。 使用选择来呈现 1000 条记录通常不会为用户提供最佳 UI。通常不欢迎滚动浏览那么多记录。您是否可以考虑使用自动完成下拉菜单,以便用户开始输入名称然后您过滤并显示所有匹配的记录? 【参考方案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

【讨论】:

以上是关于在 IE 中引导选择加载时间过长的主要内容,如果未能解决你的问题,请参考以下文章

引导输入类型=“日期”不加载日期选择器

加载商店后,在 Chrome 中选择并显示网格中的特定行,而不是在 IE 中

在引导选项卡中选择 2 挤压下拉列表

在引导日期选择器更改月份事件不起作用

在 IE 的 jQuery Ajax 成功函数中无法识别选择器

Twitter Bootstrap 选择箭头丢失