真实DOM操作和虚拟DOM操作的比较

<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操作的原因了!