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

真实DOM操作和虚拟DOM操作的比较相关推荐

React:DOM树与虚拟DOM树(概念与区别)
React:DOM树与虚拟DOM树(概念与区别) DOM的本质: 浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API: React中的虚拟DOM: 是框架中的概念,是程序员 ...
【虚拟DOM】浅析虚拟DOM
虚拟DOM作为目前流行的DOM操作思想,被广泛用在react中,这套设计的确在用户体验上带来了显著提升.下面我们来浅析一下这个东西,一步步看下去,希望你能有所收获. 设计理念尽管MVVM将页面逻辑实 ...
virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大 ...
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
从VirtualDom（虚拟Dom）到真实DOM
浏览器中的Dom更新在浏览器中渲染引擎将 node 节点添加到另外节点中时会触发样式计算.布局.绘制.栅格化.合成等任务,这一过程称为重排. 除了重排之外,还有可能引起重绘或者合成操作,也就是&q ...
真实DOM和虚拟DOM
文章目录如何高效操作DOM 什么是DOM 浏览器真实解析DOM的流程为什么说操作DOM耗时如何高效操作DOM 虚拟DOM 什么是虚拟DOM 为什么要有虚拟DOM 虚拟DOM的作用 Vue中的虚拟 ...
虚拟DOM和真实DOM的区别和联系
介绍一下虚拟dom和真实dom吧一.DOM DOM是文档对象模型(Document Object Model),它是一个结构化文本的抽象. 二.虚拟DOM 虚拟DOM只是js模拟的DOM结构,是对真 ...
虚拟DOM和真实DOM的区别
DOM DOM意思是文档对象模型(Dcoument Object Model),它是一个结构化文本的抽象操作DOM 所以,只要我们想要动态修改网页的内容的时候,我们就修改DOM. var item ...
虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...

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

真实DOM操作和虚拟DOM操作的比较相关推荐

最新文章

热门文章