更高效的jQuery

Question

以下代码可以正常工作，但它让浏览器有点奇怪。没有什么大问题。我想知道是否有一种更有效的方法？我可以使用缓存或者以某种方式填充一个下拉列表，然后将其复制到其他5个下拉列表中。（页面上有6个带有“mask”类的下拉列表。）

非常感谢任何帮助！

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

- user342706

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中的元素都放入一个文档片段中，然后进行克隆并批量添加（每个选择器一批）, 而不是单独添加每个元素到DOM中（这样很消耗性能）。

- Nick Craver

---

有人能详细解释一下为什么尽管它不如上面的解决方案快，但这种方法更受欢迎吗？ - user342706

@Kyle - 使用DOM创建节点更安全，例如在值中使用引号等（尽管在这种特定情况下是安全的）会导致问题、无效的HTML和不可预测的渲染。为了安全起见，请坚持使用DOM创建方法，而不是通过字符串生成HTML。 - Nick Craver

Answer 2

根据此处的测试结果（链接），自己构建一个单一字符串的HTML代码要快得多（大约3-10倍）：

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

- David Tang

---

这显然是更快的解决方案，但似乎并不是每个人都喜欢使用？有人能详细说明为什么这不如下面的解决方案好吗？ - user342706