前端性能优化：创建文档碎片每次操作DOM节点插入时，浏览器会触发重排重绘，为了提高效率，要尽可能的减少重排重绘，即应该减

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。

一般情况下，在操作DOM结构的时候,经常会说非常消耗性能，原因是我们向DOM中添加新的元素，DOM会立刻更新。也就是添加一次更新一次，如果添加100个节点，那么就得更新100次，很浪费资源呀。

在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下：

for(var i=0;i<5;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    document.body.appendChild(op); 

}

但是，如果当我们要向document中添加大量数据时(比如1w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。

如果我们向以上代码一样，向页面插入很多dom元素，这种渲染的过程是十分缓慢的。

每次操作DOM节点插入时，浏览器会触发重排重绘，为了提高效率，要尽可能的减少重排重绘，即应该减少DOM节点的插入。有一种方法就是利用文档碎片去做。

文档碎片是一种虚拟的DOM节点，存在于内存中，跟实际的DOM节点之间没有关系，当我们需要给一个节点中插入多个子节点的时候，完全可以将多个子节点先插入到文档碎片中，所有子节点都放到文档碎片中后，再将文档碎片插入到实际的节点中，这样就减少了很多节点直接插入到父节点中的次数了，也就是本来多次触发重排重绘的操作，有了文档碎片中，只需要触发一次重排重绘了。

为了解决这个问题，我们可以使用文档碎片createDocumentFragmnet（）的方法，即创建一个文档碎片，把需要创建的文档放到文档碎片中，然后再一次性的添加到页面中,这样以来在一定程度上提高页面速度。

代码如下:

//先创建文档碎片

var oFragmeng = document.createDocumentFragment(); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    //先附加在文档碎片中

    oFragmeng.appendChild(op);  

} 


//最后一次性添加到document中

document.body.appendChild(oFragmeng);

经过测试，在ie，firefox下性能明显得以提高。大家可以自己测试下。前端性能优化都是从一些细节地方做起的，如果不加以注意，后果很严重。