前端性能优化之文档片段节点

前端性能优化之文档片段节点

　　我们知道，操作DOM是非常耗时的，并且直接在DOM上操作会使得页面不断的重排和重绘。 

　　所以我们可以使用“文档片段节点”，即DocumentFragment。

　

　　使用方法： 将将我们希望添加的元素先添加到DocumentFragment上，然后在将它添加到DOM上。

　　方法： var fragment = document.createDocumentFragment(); 这样就创建了文档片段节点。

　　文档片段节点具有下面的几个属性：

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

　　

具体使用：　　在添加元素时，我们常常会使用appendChild()添加元素，这会导致不断的重排和重绘。 而使用document.createDocumentFragment()可以不影响DOM树，最后只会导致一次重排，如下所示：

　　

<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>

 

最终输出的时间如下：

time: 112.912ms
time: 63.789ms

 

 这里使用文档节点的时间更长一些，应该是主页面的内容太少了，如果主页面的东西很多，那么使用文档节点应当会省时一些。

注意： 这里console.time("time"); console.timeEnd("time");  可以打印出两者之间的时间。