JS中文档碎片的理解和使用

文章原地址：https://www.cnblogs.com/suihang/p/9491359.html
1、我们要明白当js操作dom时发生了什么？

   每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"        

2、什么是文档碎片？ document.createDocumentFragment() 一个容器，用于暂时存放创建的dom元素

3、文档碎片有什么用？ 将需要添加的大量元素 先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大 减少dom操作，提高性能（IE和火狐比较明显）
比如需要往页面上放100个元素：
普通方式：（操作了100次dom）

        for(var i=100; i>0; i--){ 

          var elem = document.createElement('div');

          document.body.appendChild(elem);//放到body中          }
 文档碎片：(操作1次dom)         

    var df = document.createDocumentFragment();          

      for(var i=100; i>0; i--){              

        var elem = document.createElement('div');                             

        df.appendChild(elem);          }         

     //最后放入到页面上         

   document.body.appendChild(df);