|
|
雖然我們平時在開發中遇到這樣情況的時候并不多，但還是有必要了解一下，JS中提供了一個DocumentFragment的機制，相信大家對這個并不陌生，它可以提供一個緩沖的機制，將DOM節點先放到內存中，當節點都構造完成后，再將DocumentFragment對象添加到頁面中，這時所有的節點都會一次渲染出來，這樣就能減少瀏覽器很多的負擔，明顯的提高頁面渲染速度。例如下面的代碼：
復制代碼 代碼如下:
function CreateNodes(){
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + " <br />";
document.body.appendChild(tmpNode);
}
}
function CreateFragments(){
var fragment = document.createDocumentFragment();
for(var i = 0;i < 10000;i++){
var tmpNode = document.createElement("div");
tmpNode.innerHTML = "test" + i + "<br />";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}
上面的代碼給出了兩個函數，分別是用普通的DOM方法和DocumentFragement兩種方式向頁面添加一萬個div節點，大家可以自己實驗一下，使用第二種方式要比第一種快很多。這里只是簡單的div標簽的平鋪添加，如果是更加復雜的HTML標簽或是多層的嵌套標簽，那么性能的差距就會更加明顯。
通過上面的例子，大家在開發JavaScript應用的時候，如果遇到這種大量節點的情況，不妨將DocumentFragment作為一個備選的方案。
JavaScript技術：JavaScript Tips 使用DocumentFragment加快DOM渲染速度，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
