快捷導(dǎo)航

JavaScript Tips 使用DocumentFragment加快DOM渲染速度

更新時(shí)間：2010年06月28日 01:42:59 作者：

大家在開(kāi)發(fā)JavaScript應(yīng)用的時(shí)候，如果遇到這種大量節(jié)點(diǎn)的情況，不妨將DocumentFragment作為一個(gè)備選的方案。

大家在使用JavaScript的時(shí)候，DOM操作是最平常不過(guò)的了，隨著Web前端技術(shù)的發(fā)展,我們?cè)絹?lái)越多的使用JS來(lái)操作DOM元素，比如通過(guò)ajax請(qǐng)求獲取到數(shù)據(jù)，然后更新頁(yè)面上的元素，一般情況下，這種操作我們會(huì)用類似node.appendChild()這中方式來(lái)完成。這個(gè)方法是無(wú)緩沖的，也就是說(shuō)我們每次調(diào)用appendChild方法的時(shí)候，瀏覽器都會(huì)重新渲染頁(yè)面。當(dāng)然，使用這種方法也沒(méi)有什么不行，因?yàn)槲覀冊(cè)谝话闱闆r下都是對(duì)少量的DOM節(jié)點(diǎn)進(jìn)行更新，也并不會(huì)帶來(lái)太大的性能問(wèn)題，但是如果大量的更新DOM節(jié)點(diǎn)，那么性能的差距就會(huì)越來(lái)越明顯了。因?yàn)闉g覽器要不停的渲染頁(yè)面，尤其是一些復(fù)雜的標(biāo)簽，大量的重新渲染非常消耗性能，影響用戶體驗(yàn)。那么有什么好的方法能讓這類DOM操作的效率提高呢？

　　雖然我們平時(shí)在開(kāi)發(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ò)上面的例子，大家在開(kāi)發(fā)JavaScript應(yīng)用的時(shí)候，如果遇到這種大量節(jié)點(diǎn)的情況，不妨將DocumentFragment作為一個(gè)備選的方案。

您可能感興趣的文章: