给DOM添加相同的数量的字符串,到底什么会相应性能呢?
测试代码:
var length = 300000;
function Test1() {
var t = [length];
for (var i = 0; i < length; i++) {
t.push("<br/>" + i.toString());
}
var date1 = new Date().getTime();
document.getElementById("div1").innerHTML = t.join("");
var date12 = new Date().getTime();
console.log("1Test" + ((date12 - date1)));
}
function Test2() {
var t = [length];
for (var i = 0; i < length; i++) {
t.push("bbrrr" + i.toString());
}
var date1 = new Date().getTime();
document.getElementById("div2").innerHTML = t.join("");
var date12 = new Date().getTime();
console.log("2Test" + ((date12 - date1)));
}
测试发现,同样的字符数量,就因为包含了大量的标签就导致了性能差异有六七倍,其实上如果在包含样式,类等,性能差异会更大。因此在创建标签时,没必要的标签就应该去掉,例如隐藏的,或者在需要时在添加必要的标签。
为什么会有这么大的差别呢?个人感觉是因为包含大量的标签,重新计算DOM树就需要花费大量的时间,然后渲染也需要大量的时间。