virtual DOM是如何优化性能的

javascript/jquery

浏览数:67

2019-6-29

谈到virtual DOM 前先来说说浏览器渲染的流程

浏览器接收到html文件,并转换成DOM树。如果有css还会生成css树。如果遇到script标签,会先判断是async或defer。如果是前者会并行下载并执行js,后者会先下载,等html解析完后顺序执行。
当构建后dom树和css树后,开始构建render树。这一步就是确定页面布局和样式,在生成render树的过程中浏览器就开始绘制合成图层将内容显示在屏幕。
只要dom一更新,以上流程浏览器就会再执行一次。

当数据开始变化时,如何手动操作DOM?

回想一下,这样的场景是不是常常见到。一个列表中有许多条数据,需要提供一个按钮来控制数据的排序;一个按钮删除,一个按钮新增甚至还有编辑数据。当没有任何的框架的时候,就需要我们手动的修改DOM结构。给按钮增加监听事件和回调函数更新DOM。功能越复杂,需要增加的事件和维护的代码就会越来越多,项目也会越来越臃肿。

virtual DOM是如何操作的
首先有一个数据结构和DOM结构相似的对象,然后用这个对象去渲染真正的DOM树。当状态发生改变时,新生成一个对象和原来的对象比较,发现有不同的地方,就将改变的地方替换掉相对应的原来的对象的地方。

两种渲染的比较
为什么通过virtual DOM会提高性能呢?
要知道每一次修改DOM都会触发浏览器的重新渲染的流程。
假设有一个页面数据庞大,需要修改1000条数据,
直接操作DOM 相当于1000浏览器重新渲染
然而使用虚拟DOM是先js层面了计算了1000次,计算好后在访问一次DOM
在js层面的计算和直接访问DOM操作相比,简直便宜得不行。

作者:someone