JavaScript - createElement vs createDocumentFragment

答客問

網友 Adam Lee 在 JavaScript - 程式碼壓縮與最佳化 留言指教,說我的測試程式有問題。因為文章撰寫時間有點久了,也忘了當時有沒有進行測試,那我們就來測試看看吧。

createElement與createDocumentFragment的測試程式碼。

網友 Adam Lee 已準備好一個測試程式 http://jsfiddle.net/z3caE/ 大家可以用不同瀏覽器玩玩看分數如何?

以下是我在本機端的測試程式:

在 body 裡加入:

      <div id="msgce"></div>
      <div id="msgcdf"></div>
      <ul id="ulItem"></ul>

      <script>

      </script>
  

<script> 裡加入以下測試程式碼:

   function TestLiCE(){
          var oUL = document.getElementById("ulItem");
          for (var i = 0; i <= 20000; i++) {
            var oLI = document.createElement("li");
            oUL.appendChild(oLI);
            oLI.appendChild(document.createTextNode("Item" + i));
          }
      }

      function TestLiCDF(){
          var oUL = document.getElementById("ulItem");
          var oTemp = document.createDocumentFragment();
          for (var i = 0; i <= 20000; i++) {
              var oLI = document.createElement("li");
              oLI.appendChild(document.createTextNode("Item" + i));
              oTemp.appendChild(oLI);
          }
          oUL.appendChild(oTemp);
      }
      
      var divce = document.getElementById("msgce");
      var divcdf = document.getElementById("msgcdf");
      
      divce.innerHTML += "CE-LI:"
      for (var i =0; i <= 10; i++) {
          var s = (new Date).getTime();
          TestLiCE();
          divce.innerHTML += ((new Date).getTime() - s) + ",";
      };

      divcdf.innerHTML += "CDF-LI:"
      for (var i =0; i <= 10; i++) {
          var s = (new Date).getTime();
          TestLiCDF();
          divcdf.innerHTML += ((new Date).getTime() - s) + ",";
      };
  

TestLiCE函式主要透過 createElement 進行元素的新增。TestLiCDF 函式主要透過 createDocumentFragment 進行元素的新增。另外我加入 10 次迴圈,記錄這 10 次的時間值,可以看出平均值。

createElement與createDocumentFragment的分數?

IE 10 得到的分數是:

IE 10 測試結果

Firefox 21 得到得分數是:

firefox 21 測試結果

Chrome 27 得到的分數是:要跑好久好久。為了讓結果出現,將函式內迴圈的值修改 i <= 2000,得到以下結果:

Chrome 27 測試結果

小結

  • 三種瀏覽器三種完全不一樣的結果。令人不知要哭還是要笑。換個角度來看,三個瀏覽器使用三種不同的 JavaScript 引擎,三種 JavaScript 引擎各有強項,就本篇而言,Firefox 是最正常的,IE 最不正常,Chrome 時好時壞,Chrome 的不正常不知道和它的多核架構有沒有關係。
  • 在現在的時空背景之下,由上面的測試結果來看,那篇文章已經不是那麼重要,重要的是使用者的瀏覽器採用那一種的JavaScript 引擎,因為相同的程式碼在不同 JavaScript 引擎有不同的效果。
  • 最後的 Chrome 要跑好久來是因為呈現方式與 IE / Firefox 不同,IE / Firefox 只呈現最後一次的 20000 筆 li 元素,Chrome 會完整呈現 20000 * 10 筆 li 元素。時間太久,我就沒等它了。
  • IE 除了作業模式不正常外,分數還很不好看。

文章發佈後約 20 來分鐘,Chrome 終於跑玩了。

chrome 27 測試結果 long time

2 則留言:

  1. 文章發佈後約 20 來分鐘,Chrome 終於跑完了。

    ((昏倒...

    回覆刪除
  2. Sorry,
    此文有嚴重錯誤,請參考 http://blog.kkbruce.net/2012/02/javascript_24.html 的留言。

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。