前端
一点也不简单

比较真实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>

得出结果非常的直观:

DOM操作和数据操作比较

两种方式通过相同次数的操作得出相同的结果,明显,在这次实验中数据可以发现,将近有了40倍的差距,所以证明了DOM操作的性能是非常的差的,这是非常可怕的,这也是为什么我们要用数据操作替代DOM操作的原因了!

赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » 比较真实DOM操作和数据操作谁更快

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏