深刻理解DOM節點類型第四篇——文檔片斷節點DocumentFragment

前面的話

　　在全部節點類型中，只有文檔片斷節點DocumentFragment在文檔中沒有對應的標記。DOM規定文檔片斷(document fragment)是一種「輕量級」的文檔，能夠包含和控制節點，但不會像完整的文檔那樣佔用額外的資源

 

特徵

　　建立文檔片斷，要使用document.createDocumentFragment()方法。文檔片斷繼承了Node的全部方法，一般用於執行那些針對文檔的DOM操做

　　文檔片斷節點的三個node屬性——nodeType、nodeName、nodeValue分別是十一、'#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能夠提高性能

 

最後

　　因爲文檔片斷的優勢在IE瀏覽器下並不明顯，反而可能成爲畫蛇添足。因此，該類型的節點並不經常使用