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