JQuery - 将列表项附加到列表的最快方法答案

【问题标题】：JQuery - Fastest possible way of appending list items to listJQuery - 将列表项附加到列表的最快方法
【发布时间】：2010-11-29 23:35:44
【问题描述】：

我有一些运行良好的 jquery，但我想对其进行高度优化。基本上我是将标准附加列表项添加到无序列表中。谁能推荐最快的优化以下代码的方法，例如创建文档片段？

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

【问题讨论】：

根据描述，'list'是一个无序列表（ul）DOM元素。
@Chris - 但它是刚刚创建的，作为此操作的一部分......还是已经在 DOM 中？
因为我没有什么比这更好的事了（……反正我想做……）我想我应该把创建元素的简单比较放在一起和appendTo()（与您自己的方法略有不同）。这表明使用$(document.createElement('li')) 创建元素始终比使用$('<li></li>') 的jQuery 方法更快。当然，这是否可以转让给您自己使用完全是另一回事。 Demo at JS Fiddle.

标签： javascript jquery optimization

【解决方案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(""));

【讨论】：

为什么这是最快的？

【解决方案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);

我建议阅读以下内容：

Optimizing JavaScript For Execution Speed

来自文章：

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

【讨论】：

@karim79 - 我要再做一项更改，尽量避免使用全局变量...我意识到 OP 这样做了，但我希望这是无意的。
我得到“找不到页面”的优化链接。那么添加大量 HTML 代码真的比直接 DOM 操作更快吗？我原以为模板上有一个clone()，更改<span> 中的文本并追加会更快。可以做一些分析。
我会使用 innerHTML 而避免使用 jQuery
谢谢大家，每个人似乎都想念的一点是我正在使用 jquery.data 方法将 Id 与 DOM 元素 ... 相关联。不要混淆 span 元素的 ID 属性。因此，我不确定连接将如何工作，因为我知道我需要引用 DOM 元素才能在其上设置数据。这是正确的吗？

【解决方案3】：

首先，您可以制作一大块 li 元素，然后将它们附加到一个操作中，而不是一次附加一个。

【讨论】：

【解决方案4】：

谢谢大家，大家似乎都想念的一点是，我正在使用 jquery.data 方法将 Id 与 DOM 元素相关联。不要混淆 span 元素的 ID 属性。因此，我不确定连接将如何工作，因为我知道我需要引用 DOM 元素才能在其上设置数据。这是正确的吗？

【讨论】：