jQuery为选择杀死chrome添加了许多选项

Question

我正在尝试使用jQuery为select添加大约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(''));