Question

这段代码可以运行，但它有点让浏览器怪异一点。没什么大不了的。我想知道是否有办法让这更有效率？我可以使用缓存或以某种方式填充一个选择，然后将其复制到另一个选择5.（页面上有一类'掩码'有6个下拉菜单。）

非常感谢任何帮助！

$('.mask').each(function () {
  $(this).append($('<option/>').val("").text(""));
    for (var i = 1; i < 256; i++) {
      $(this).append($('<option/>').val(i).text(i));
    }
  });
});

Answer 1

您可以创建一次节点然后克隆它们，如下所示：

var temp = $('<select/>');
$('<option/>').val("").text("").appendTo(temp);
for (var i = 1; i < 256; i++) {
  $('<option/>').val(i).text(i).appendTo(temp);
}
temp.children().clone().appendTo('.mask');

而不是对DOM进行大量单独追加（这是非常昂贵的），而是将文档片段中的所有元素批处理，然后克隆它们，批量追加（每个选择一批）。

Answer 2

在单个字符串中自己构建HTML的速度要快得多（大约3-10倍，经过测试here）：

var html = "<option value=''></option>";
for (var i = 1; i < 256; i++) {
   html += "<option value='" + i + "'>" + i + "</option>";
}
$(".mask").append(html);

请参阅性能测试，比较此主题中的当前选项：http://jsperf.com/appending-options-jquery

更高效的jquery

2 个答案: