優化附加 <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(''));