zoukankan      html  css  js  c++  java
  • 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代码量最少

  • 相关阅读:
    [2019.2.24]BZOJ4591 [Shoi2015]超能粒子炮·改
    [2019.2.13]BZOJ4318 OSU!
    [2019.1.17]BZOJ1066 [SCOI2007]蜥蜴
    [2019.1.15]BZOJ2152 聪聪可可
    [2019.1.17]BZOJ3993 [SDOI2015]星际战争
    [2019.1.14]BZOJ2005 [Noi2010]能量采集
    [2019.1.10]BZOJ1853 [Scoi2010]幸运数字
    [2019.1.9]BZOJ2299 [HAOI2011]向量
    yyb博客的几道神仙题
    CQOI2018异或序列 [莫队]
  • 原文地址:https://www.cnblogs.com/ljk001/p/7999892.html
Copyright © 2011-2022 走看看