更高效的jquery

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

它的速度更快(约3-10倍,所测试这里)建立在一个字符串的HTML自己:

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