virtual DOM是如何优化性能的

谈到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操作相比，简直便宜得不行。