深入理解DOM節點類型第四篇——文檔片段節點DocumentFragment - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　在所有節點類型中，只有文檔片段節點DocumentFragment在文檔中沒有對應的標記。DOM規定文檔片段(document fragment)是一種“輕量級”的文檔，可以包含和控制節點，但不會像完整的文檔那樣占用額外的資源

特征

　　創建文檔片段，要使用document.createDocumentFragment()方法。文檔片段繼承了Node的所有方法，通常用于執行那些針對文檔的DOM操作

　　文檔片段節點的三個node屬性——nodeType、nodeName、nodeValue分別是11、'#document-fragment'和null，文檔片段節點沒有父節點parentNode

var frag = document.createDocumentFragment();
console.log(frag.nodeType);//11
console.log(frag.nodeValue);//null
console.log(frag.nodeName);//'#document-fragment'
console.log(frag.parentNode);//null

作用

　　我們經常使用javascript來操作DOM元素，比如使用appendChild()方法。每次調用該方法時，瀏覽器都會重新渲染頁面。如果大量的更新DOM節點，則會非常消耗性能，影響用戶體驗

　　javascript提供了一個文檔片段DocumentFragment的機制。如果將文檔中的節點添加到文檔片段中，就會從文檔樹中移除該節點。把所有要構造的節點都放在文檔片段中執行，這樣可以不影響文檔樹，也就不會造成頁面渲染。當節點都構造完成后，再將文檔片段對象添加到頁面中，這時所有的節點都會一次性渲染出來，這樣就能減少瀏覽器負擔，提高頁面渲染速度

<ul id="list1"></ul>
<script>
var list1 = document.getElementById('list1');
console.time("time");
var fragment = document.createDocumentFragment();
for(var i = 0; i < 500000; i++){
    fragment.appendChild(document.createElement('li'));
}
list1.appendChild(fragment);
console.timeEnd('time');
</script>

<ul id="list"></ul>
<script>
var list = document.getElementById('list');
console.time("time");
for(var i = 0; i < 500000; i++){
    list.appendChild(document.createElement('li'));
}
console.timeEnd('time');
</script>

　　循環50萬次的各瀏覽器結果

           　　 使用文檔片段        　　不使用文檔片段
firefox        402.04ms              469.31ms
chrome         429.800ms             729.634ms

　　循環10萬次的各瀏覽器結果

            　　使用文檔片段        　　不使用文檔片段
IE11        　　2382.15ms             2204.47ms
IE10        　　2404.239ms            2225.721ms
IE9             2373ms                 2255ms
IE8             4464ms                 4210ms
IE7             5887ms                 5394ms

　　由以上結果可以看出，若使用IE瀏覽器，則使用文檔片段DocumentFragment的性能并不會更好，反而變差；若使用chrome和firefox瀏覽器，使用文檔片段DocumentFragment可以提升性能