jQuery 在选择中添加许多选项会杀死 chrome

Question

我正在尝试使用 jQuery 将大约 500 个选项添加到选择中。它运行 500 次循环。

for( var i=0; i<ids.length;i++ ){
  $("#selectId').append('<option value="' + value + '">' + label + '</option>');
}

在 Mozilla Firefox 等中，它工作正常(大约需要 3 秒)，但在 Goggle Chrome 中，浏览器会在半分钟后崩溃。

我放了一些日志来看看它需要多少时间，它从每个循环 1ms 开始，然后增加到 ~1s ...

有什么建议可以提高效率吗？

Answer 1

我发现您的循环存在两个性能问题:

1. 在每次迭代中，您都会创建一个新的 jQuery 对象并在 DOM 中搜索 #selectId
2. 在每次迭代中，您都会操作 DOM，添加一行。

这两者都会影响性能。尝试:

var options = [];
for (var i = 0; i < ids.length; i++) {
  // first, populate an array with all the options as strings
  options.push('<option value="' + value + '">' + label + '</option>');
}
// then, join that array into a string and just .append or .html
$('#selectId').append(options.join(''));
// OR
$('#selectId').html(options.join(''));