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);
}

- Click Ahead

---

根据描述，“list”是一个无序列表（ul）DOM元素。 - Chris Hutchinson

@Chris - 但它是作为此操作的一部分刚刚创建的，还是已经存在于DOM中？ - Nick Craver

因为我没什么更好的事可做（...至少不是我想做的...），所以我想组织一个简单的比较，来对比创建元素和使用 appendTo() 的速度（这种方式与你自己的方法略有不同）。这表明，使用 $(document.createElement('li')) 创建元素始终比使用 jQuery 方法 $('<li></li>') 更快。当然，这是否适用于你自己的使用情况则是另一回事。JS Fiddle 上的演示。 - David Thomas

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(""));

- tim

---

为什么这是最快的？ - GorillaApe

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 操作。

- karim79

---

@karim79 - 我会再做一个更改，尽量避免全局变量...我意识到OP这样做了，但是我希望这不是有意为之。 - Nick Craver

我在优化链接上得到了“页面未找到”的错误。那么，添加大量的HTML代码是否比直接DOM操作更快呢？我认为，在模板上进行clone()，更改<span>中的文本并附加可能会更快。需要进行一些分析。 - Orbling

我会使用innerHTML并避免使用jQuery。 - Pablo Fernandez

谢谢大家，似乎大家都忽略了一个重要的点，那就是我正在使用jquery.data方法将Id与DOM元素<span class="item">...关联起来。这与span元素的ID属性不要混淆。因此，我不确定如何进行连接，因为我理解我需要引用DOM元素才能在其上设置数据。这样对吗？ - Click Ahead

Answer 3

首先，您可以创建一个大的li元素块，然后一次性将它们附加而不是逐个附加。

- Surreal Dreams

Answer 4

谢谢大家，每个人似乎都忽略了一个关键点，那就是我正在使用jquery.data方法将Id与DOM元素关联起来。这不应与span元素的ID属性混淆。因此，我不确定如何进行连接，因为我理解需要引用DOM元素才能在其上设置数据。这正确吗？

- Click Ahead