优化附加 <li> 进入 <ul> 与jQuery

Question

我用附加li元素的搜索结果填充列表。 我为每个结果更新DOM。

for (var i = 0; i < topics.length; i++) {
    $("#searchResults").append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

我想先创建一组li元素，然后仅更新一次DOM-tree。

我尝试这样的事情：

var list = $([]);

for (var i = 0; i < topics.length; i++) {
    list.append(
        $("<li />")
            .append(result.Name)
            .addClass("example")
    );
};

$("#searchResults").append(list);

但是div $("#searchResults")为空。

问题出在哪儿？

Answer 1

这样的事情应该更快：

var ul = $("<ul />");
for (var i = 0, l=topics.length; i < l; i++) {
   $("<li />", { text: result.Name, "class": "example" }).appendTo(ul);
};
$("#searchResults").append(ul.contents());

通过使用文档片段（ $("<ul />")并将其附加，然后附加在末尾，我们不会弄乱每个附加的整个DOM。 同样，我们不会在每个循环中重复选择#searchResults ...或检查.length也会很昂贵。

注意：该方法仍然使用DOM来创建元素（而不是字符串），从而消除了result.Name问题。具有HTML的名称可能会使事情搞砸等等。

Answer 2

对于我们添加的每个元素，所有以前的解决方案仍然需要重新计算，绘制和布局。

创建元素时，不要将元素直接添加到DocumentFragment而是将它们添加到DocumentFragment ，最后将其添加到DOM中。

var el;
var i = 0;
var fragment = document.createDocumentFragment();

while (i < 500) {
    el = document.createElement('li');
    el.innerText = '1ist ' + i;
    fragment.appendChild(el);
    i++;  
}

div.appendChild(fragment);

Answer 3

尝试仅使用字符串。 将所有li添加到字符串中，然后将其放入searchResults div的innerHTML中。

var list = '';

for (var i = 0; i < topics.length; i++) {
    list +="<li class=example>" + result.Name + "</li>";
}

$("#searchResults").innerHTML = list;

如果您正在寻找功效，那可能会更好，因为您没有大量使用DOM引擎。 （尽管除非您要添加数百个li否则它可能并不重要。

Answer 4

动态创建DOM元素通常比仅使用innerHTML（或周围的包装器）要慢。 同样，用+连接字符串通常比使用Array.join('')慢。

最后，我怀疑这样的速度最快：

var list = [];

for (var i = 0; i < topics.length; i++) 
    list.push("<li class=example>",topics[i].Name,"</li>");

$("#searchResults").html(list.join(''));