在 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('<option ...>')
来替代生成大的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 中