JS性能优化之文档碎片创建

 1.何为文档碎片
通俗易懂解释文档碎片：我们每次去超市买东西，都是用袋子一次性把所有东西运回来，而不可能选择每次只拿一样东西。而当我们用JS DOM向页面插入元素的时候，每插入一个元素，页面就会渲染一次，但当我们要插入过多元素的时候，页面渲染的次数会使得DOM的操作性能降低。而在这个过程中，文档碎片就类似于一个我们买东西的袋子，我们每次创建好一个元素的时候，不直接插入页面中，而是插入文档碎片里，最后再一次性地把所有元素插入页面中，这样页面只需要渲染一次，极大地提高了性能。
2.为何要创建文档碎片
在浏览器中，修改、删除或者增加DOM元素。更新DOM会导致浏览器重新绘制屏幕，对于少量的更新，一条条循环插入也会运行很好。但是，如果当我们要向document中添加大量数据时(比如1w条)，逐条添加节点，会导致reflow,这样会带来巨大的开销，这个过程就可能会十分缓慢。我们通常解决这种情况的办法尽量减少更新DOM，这也就意味着将DOM的改变分批处理，并在“活动”文档树之外执行这些更新。当需要创建一个相对比较大的子树，应该在子树完全创建之后再将子树添加到DOM树中，这时采用文档碎片技术来容纳所有的节点
3.如何创建文档碎片
（1）创建文档碎片，就需要引入createdocumentfragment()方法
createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。
（2）示例
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);