DocumentFragment

利用js创建DOM节点消耗时间最少的方法

• 1.利用document.crateElement()进行创建

console.time("控制台计时器一");
      var ow = document.getElementById('wrapper');
          for (var i = 0; i < 1000; i++) {
              var temp = document.createElement('p');
              temp.innerHTML = 'i';
              ow.appendChild(temp);
          }
console.timeEnd("控制台计时器一");

• 2.利用innerHTML进行标签的创建

console.time("控制台计时器一");
      var str = '';
        for(var i =0 ; i < 1000 ; i++){
          str += `<p>${i}</p>`;
        }
        var ow = document.getElementById('wrapper');
            ow.innerHTML=str;
 console.timeEnd("控制台计时器一");

• 3.利用documenFragment创建DOM节点

console.time("控制台计时器一");
    var ow = document.getElementById('wrapper');
        var oFragmeng = document.createDocumentFragment();
        for(var i=0;i<1000;i++){
          var p = document.createElement('p');
          p.innerText = i;
          oFragmeng.appendChild(p);
        }
    ow.appendChild(oFragmeng);
console.timeEnd("控制台计时器一")

通过时间的对比我们可以看出来------createElement > innerHTML > documentFragment这里我用的是Chrome进行测试的,如果你想要跟直观的数据,可以使用IE进行测试,差距会明显些.

mmexport1553257875164.jpg
同步更新到我的个人博客曌明博客