深刻理解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浏览器下并不明显，反而可能成为画蛇添足。因此，该类型的节点并不经常使用