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

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