<div></div>
<script>
let box=document.getElementsByTagName('div');//获取DIV元素
// time和timeEnd结合使用可以计算中间区域的耗时
//DOM操作
console.time('a');
for (var i=0;i<=10000;i++){//这里操作了10000次DOM元素
box[0].innerHTML=i;
}
console.timeEnd('a');
//数据操作
let num=0;
console.time('b');
for(let i =0;i<=10000;i++){//这里进行了10000次数据计算
num=i;
}
box[0].innerHTML+=num;//最后将数据给了DOM元素
console.timeEnd('b');
</script>
得出结果非常的直观:
两种方式通过相同次数的操作得出相同的结果,明显,在这次实验中数据可以发现,将近有了40倍的差距,所以证明了DOM操作的性能是非常的差的,这是非常可怕的,这也是为什么我们要用数据操作替代DOM操作的原因了!