利用js創(chuàng)建DOM節(jié)點(diǎn)消耗時(shí)間最少的方法
- 1.利用
document.crateElement()進(jìn)行創(chuàng)建
console.time("控制臺(tái)計(jì)時(shí)器一");
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("控制臺(tái)計(jì)時(shí)器一");
- 2.利用
innerHTML進(jìn)行標(biāo)簽的創(chuàng)建
console.time("控制臺(tái)計(jì)時(shí)器一");
var str = '';
for(var i =0 ; i < 1000 ; i++){
str += `<p>${i}</p>`;
}
var ow = document.getElementById('wrapper');
ow.innerHTML=str;
console.timeEnd("控制臺(tái)計(jì)時(shí)器一");
- 3.利用
documenFragment創(chuàng)建DOM節(jié)點(diǎn)
console.time("控制臺(tái)計(jì)時(shí)器一");
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("控制臺(tái)計(jì)時(shí)器一")
通過時(shí)間的對(duì)比我們可以看出來------createElement > innerHTML > documentFragment這里我用的是Chrome進(jìn)行測(cè)試的,如果你想要跟直觀的數(shù)據(jù),可以使用IE進(jìn)行測(cè)試,差距會(huì)明顯些.
mmexport1553257875164.jpg
同步更新到我的個(gè)人博客曌明博客
