深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

前面的话

　　在所有节点类型中，只有文档片段节点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可以提升性能

 

最后

　　由于文档片段的优点在IE浏览器下并不明显，反而可能成为多此一举。所以，该类型的节点并不常用