|
|
雖然我們平時(shí)在開發(fā)中遇到這樣情況的時(shí)候并不多，但還是有必要了解一下，JS中提供了一個(gè)DocumentFragment的機(jī)制，相信大家對(duì)這個(gè)并不陌生，它可以提供一個(gè)緩沖的機(jī)制，將DOM節(jié)點(diǎn)先放到內(nèi)存中，當(dāng)節(jié)點(diǎn)都構(gòu)造完成后，再將DocumentFragment對(duì)象添加到頁(yè)面中，這時(shí)所有的節(jié)點(diǎn)都會(huì)一次渲染出來(lái)，這樣就能減少瀏覽器很多的負(fù)擔(dān)，明顯的提高頁(yè)面渲染速度。例如下面的代碼：
復(fù)制代碼 代碼如下:
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);
}
上面的代碼給出了兩個(gè)函數(shù)，分別是用普通的DOM方法和DocumentFragement兩種方式向頁(yè)面添加一萬(wàn)個(gè)div節(jié)點(diǎn)，大家可以自己實(shí)驗(yàn)一下，使用第二種方式要比第一種快很多。這里只是簡(jiǎn)單的div標(biāo)簽的平鋪添加，如果是更加復(fù)雜的HTML標(biāo)簽或是多層的嵌套標(biāo)簽，那么性能的差距就會(huì)更加明顯。
通過(guò)上面的例子，大家在開發(fā)JavaScript應(yīng)用的時(shí)候，如果遇到這種大量節(jié)點(diǎn)的情況，不妨將DocumentFragment作為一個(gè)備選的方案。
JavaScript技術(shù)：JavaScript Tips 使用DocumentFragment加快DOM渲染速度，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
