javascript之文檔碎片,文檔碎片在理論上可以提高DOM操作的執行效率

剛來到這裡,趁著還沒有忘記,來記錄一下,昨晚學習的一個知識點——JavaScript中的文檔碎片。

一、對文檔碎片的基本認識

  • 文檔碎片可以提高DOM操作性能(理論上,註意!!理論上的
    • 文檔碎片原理

      減少對DOM 修改帶來的的回流操作。

      下面我說一下什麼是DOM的回流操作

      舉個粗俗簡單的例子:

      比如一個人去商場買醋、白酒、鹽。

      他有兩種做法:

      (1)一次性去商場把這三樣東西都買回傢,這樣來回也就是2趟;

      (2)可以是買一樣東西就拿回傢,然後又回去買第二樣東西,接著又回去買第三樣東西,顯示這樣來回是要6趟。

      顯然後者是神經病。

      這個例子想表達的這就是回流操作,來來去去。

      現在我結合一下DOM的新增節點,使用文檔碎片的方法怎麼減少DOM回流操作,來提高性能。

      例如:一次性定義10000個li節點,然後把它們放在文檔碎片上,最後一次性掛載上去。

      另一種方法,我們沒新增一個li節點就把它掛載上去,顯然這樣要操作DOM的次數很多,引發的DOM操作回流次數多,從理論上降低瞭執行性能。(隻是理論上,因為我後來做的例子,跟我預期的結果不一致。)

      如何創建一個文檔碎片

      var oFrag = document.createDocumentFragment(); //是用來創建文檔碎片的。

      下面我把我實驗的代碼+執行截圖貼出來:

      我的測試方法:新增10000個li節點,統計執行的時間,通過對比兩者的的執行時間來判斷誰的性能更高一點。

      (1)使用普通方法掛載新增節點

      復制代碼

       1
       2 
       3     
       4         
       5         文檔碎片性能測試——普通方法
       6         <script>
       7             window.onload = function(){
       8             var oBtn = document.getElementById("btn1");
       9             var oUl = document.getElementById("ul1");
      10             
      11             var iStart = new Date().getTime();                  //開始執行的時間
      12             oBtn.onclick = function(){
      13                 //普通追加
      14                
      15                 for(var i=0; i<100000; i++){                   //使用for循環創建100000個li節點,並一個個的掛載在ul下面
      16                     var oLi = document.createElement("li");
      17                     oUl.appendChild(oLi);
      18                 }alert(new Date().getTime() - iStart);         //打印出最後這個程序耗費的而時間
      19             }
      20             
      21         }
      22         </script>
      23     
      24     
      25         
      26         
        27
      • li
      • 28
      29 30

      復制代碼

      執行結果:

      (2)使用文檔碎片:

      復制代碼

       1 
       2 
       3 
       4     
       5         
       6         文檔碎片性能測試
       7         <script>
       8             window.onload = function(){
       9             var oBtn = document.getElementById("btn1");
      10             var oUl = document.getElementById("ul1");
      11             
      12             
      13             var iStart = new Date().getTime();
      14             oBtn.onclick = function(){
      15                 //文檔碎片方式
      16                 var oFrag = document.createDocumentFragment();//建立一個文檔對象,作為新增節點的臨時容器,最後將這個容器連的內容直接掛載在父節點ul下面。
      17                  
      18                 for(var i=0; i<100000; i++){
      19                     var oLi = document.createElement("li");
      20                     oFrag.appendChild(oLi);
      21                 }
      22                 oUl.appendChild(oFrag);
      23                 alert(new Date().getTime() - iStart);
      24             }
      25             
      26         }
      27         </script>
      28     
      29     
      30         
      31         
        32
      • li
      • 33
      34 35

      復制代碼

      執行截圖:

      大概總結:

      當我們需要大量 appendChild 頁面元素時,可以先將這些元素 appendChild 進 document.createDocumentFragment。

      然後隻需 appendChild 文檔碎片到頁面就可以瞭。這樣就不用多次刷新頁面達到性能優化的目的。上面那個代碼我覺得用到文檔碎片是多餘的。(再次證明隻是理論上的提高性能)

      這些就是我學習到的內容,以後有學習到更多關於這方面的,到時再更新。

發佈留言