利用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
同步更新到我的个人博客曌明博客
