js中几种动态创建元素并设置文本内容的比较，及性能测试。

动态创建标签并添加文本信息

<ul>
</ul>

Table of Contents

1 appendChild (都兼容)

var ul = document.getElementsByTagName("ul")[0];
      for(var i = 0; i < 5; i++) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode("text"));
        ul.appendChild(li); //逐个添加列表项，会导致浏览器的反复渲染
      }

2.insertAdjacentHTML (都兼容)

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

3.innerHTML (都兼容)

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

4.createDocumentFragment (都兼容)

var ul = document.getElementsByTagName("ul")[0],
        dF = document.createDocumentFragment();//创建文档片段
      for(var i = 0; i < 5; i++) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode("text"));
        dF.appendChild(li); //用文档片段来保护创建的列表项，然后再一次性添加到文档中，这里的文档片段相当于一个仓库
      }
      ul.appendChild(dF);
      ul = null,
        dF = null;

下面是几种方法的性能对比
测试网站 https://jsperf.com
测试结果以每秒钟执行测试代码的次数（Ops/sec）显示，这个数值越大越好。除了这个结果外，同时会显示测试过程中的统计误差，以及相对最好的慢了多少（%），统计误差也是非常重要的指标
本人只在chrome上测试了。数据可能不准确。你也可以在ff ，ie或其他浏览器测试。
insertAdjacentHTML vs append

insertAdjacentHTML vs innerHTML

insertAdjacentHTML vs createDocumentFragment

appendChild vs createDocumentFragment

终上所述几种方法依我个人的测试得出结论
innerHTML>>insertAdjacentHTML >appendChild >createDocumentFragment
所以最好使用innerHTML（性能最优越）来动态创建标签。 insertAdjacentHTML代码量最少

Tags: js, 性能测试