性能提升之document.createDocumentFragment()

在向document.body中添加节点时，我们通常使用的是document.appendChild()方法，当然，这肯定没有错误，但是如果需要添加大量数据，比如说循环添加节点时，那么使用该方法就会变的十分缓慢，因为每添加一个节点都会产生一次页面渲染，所以性能也就十分低下。那么，此时的createDocumentFragment()方法就派上用场了。

document.createDocumentFragment()相当于先创建一个文档碎片，我们在添加多个节点的时候，可以先将节点附加在这个文档碎片上，然后将文档碎片一次性添加到document中，这样也就是只发生一次页面渲染，自然而然，性能也就有了显著的提升。

例如，如下的代码，当我们想创建100个段落的时候，使用常规的方式：

for (var i = 0; i < 100; i++) {
    var p = document.createElement('p');
    var txt = document.createTextNode('hello ' + i);
    p.appendChild(txt);
    document.body.appendChild(p);
}

很显然，上述代码调用了100次document.body.appendChild()，所以也就发生了100次页面渲染。那么如果使用碎片的方式，如下：

var frag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
    var p = document.createElement('p');
    var txt = document.createTextNode('hello ' + i);
    p.appendChild(txt);
    frag.appendChild(p);
}
document.body.appendChild(frag);

很明显，只执行了一次document.body.appendChild()，这性能的提升也就不言而喻了！