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

我建议读这个：

Optimizing JavaScript For Execution Speed

来自文章：

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

Answer 3

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

Answer 4

谢谢大家，每个人似乎都错过的一点是我正在使用jquery.data方法将Id与DOM元素相关联。这不要与span元素的ID属性混淆。因此，我不确定串联是如何工作的，因为我理解我需要引用DOM元素来设置它上面的数据。这是对的吗？

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

4 个答案: