JQuery - 将列表项追加到列表中的最快方法

Question

我有一些工作正常的jquery,但我想高度优化它.基本上我正在将标准附加列表项添加到无序列表中.任何人都可以推荐最快的方法来优化以下代码,例如createDocumentFragment？

for (key in data) {
     li = $('<li><span class="item">' + data[key]["Name"] + '</span><img src=' +   options.deleteIcon + ' alt="remove" class="delete"/></li>');
     $('.item', li).data('ID', data[key]["Id"]);
     $(list).append(li);
}

Answer 1

var sb = new Array();

for (key in data) {
   sb.push('<li><span class="item" id="', data[key]['Id'], '">', data[key]["Name"], '</span><img src=', options.deleteIcon, ' alt="remove" class="delete"/></li>')}

$(list).append(sb.join(""));

Answer 2

我建议将 DOM 写入次数减少到一次。我的意思是，将列表存储到临时变量中，然后在单个操作中附加整个列表。此外，.attr您可以使用连接来设置每个元素的 ID，而不是使用连接来设置每个 LI 的文本。

var tmpList = '';
for (key in data) {
     li = '<li><span class="item" id="' + data[key]['Id'] + '">' + data[key]["Name"] + '</span><img src=' +   options.deleteIcon + ' alt="remove" class="delete"/></li>';
     tmpList += li;
}

// if you are appending to an existing list, use append
// if you have just built one up from scratch, just use `.html`
$(list).append(tmpList);

我建议阅读以下内容：

优化 JavaScript 的执行速度

来自文章：

与其他编程语言不同，JavaScript 通过相对缓慢的 API（DOM）来操作网页。与 DOM 交互几乎总是比直接计算更昂贵。选择正确的算法和数据结构并重构后，您的下一个考虑应该是最小化 DOM 交互和 I/O 操作。