js中幾種動態創建元素並設置文本內容的比較,及性能測試。


動態創建標簽並添加文本信息

  1. <ul>
  2. </ul>

1 appendChild (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0];
  2. for(var i = 0; i < 5; i++) {
  3. var li = document.createElement("li");
  4. li.appendChild(document.createTextNode("text"));
  5. ul.appendChild(li); //逐個添加列表項,會導致瀏覽器的反復渲染
  6. }

2.insertAdjacentHTML (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0];
  2. for(var i = 0; i < 5; i++) {
  3. ul.insertAdjacentHTML("afterbegin", "<li>text</li>")
  4. }

3.innerHTML (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0],
  2. html = "";
  3. for(var i = 0; i < 5; i++) {
  4. html += "<li>text</li>";
  5. }
  6. ul.innerHTML = html;

4.createDocumentFragment (都兼容)

  1. var ul = document.getElementsByTagName("ul")[0],
  2. dF = document.createDocumentFragment();//創建文檔片段
  3. for(var i = 0; i < 5; i++) {
  4. var li = document.createElement("li");
  5. li.appendChild(document.createTextNode("text"));
  6. dF.appendChild(li); //用文檔片段來保護創建的列表項,然后再一次性添加到文檔中,這里的文檔片段相當於一個倉庫
  7. }
  8. ul.appendChild(dF);
  9. ul = null,
  10. dF = null;

下面是幾種方法的性能對比

測試網站 https://jsperf.com

測試結果以每秒鍾執行測試代碼的次數(Ops/sec)顯示,這個數值越大越好。除了這個結果外,同時會顯示測試過程中的統計誤差,以及相對最好的慢了多少(%),統計誤差也是非常重要的指標

本人只在chrome上 測試了。數據可能不准確。你也可以在ff ,ie或其他瀏覽器測試。

insertAdjacentHTML    vs     append

vs

insertAdjacentHTML     vs innerHTML

vs

 

insertAdjacentHTML  vs createDocumentFragment

vs

appendChild   vs   createDocumentFragment

vs

終上所述幾種方法依我個人的測試得出結論

innerHTML>>insertAdjacentHTML   >appendChild   >createDocumentFragment

所以最好使用innerHTML(性能最優越)來動態創建標簽。   insertAdjacentHTML代碼量最少


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM