渲染速度：添加一個DOM項目在同一時間或一次

目前添加項目的設置，當我在搜索結果中獲得來自搜索我循環的結果，並將其添加到一個列表（我想這將導致瀏覽器重新渲染頁面，每次項目被添加 - 有沒有辦法確認這一點？）。渲染速度：添加一個DOM項目在同一時間或一次

$.each(results, function(key, val){ 
    $(".results").append("<div>"+ val +"</div>"); 
});

在這部分第二個瀏覽器滯後了一些（有動畫和東西...）。創建單獨的div.results並在javascript中添加項目然後將其替換爲dom會更高效嗎？什麼是最有效的方式來做到這一點？這些事情通常如何完成？

來源

2013-07-13 ewooycom

我會做的是使用document.createDocumentFragment()，並盡一切可能的操作那裏，觸感真實DOM一次。（在循環旁邊可能是一個好主意來緩存選擇器一次）：

var frag = document.createDocumentFragment(); 
$.each(results, function(key, val){ 
    var a = document.createElement("div"); 
    a.innerHTML = val; 
    frag.appendChild(a); 
}); 
$(".results").append(frag);

來源

2013-07-13 17:11:34

您正在重新查詢DOM循環的每次迭代。如果您認爲在循環播放期間.results元素的數量不會發生變化，那麼沒有理由這樣做。

如果您關心性能，可以減少對jQuery的使用。

var frag = document.createDocumentFragment(); 
$.each(results, function(key, val){ 
    frag.appendChild(document.createElement("div")) 
     .appendChild(document.createTextNode(val)) 
}); 

// Since you're using a class, I assume there's more than one `.results` element 
$(".results").each(function(i, el) { 
    el.appendChild(frag.cloneNode(true)); 
});

來源

2013-07-13 17:12:32

渲染速度：添加一個DOM項目在同一時間或一次

回答

相關問題