当一个网页加载的时候，流程如下
1.生成dom树
2.生成css树
3.将dom树 和 css规则树关联起来，生成render树
4.布局
5.绘制

当我们用原生或者jquery直接去操作dom的时候，浏览器将会对dom树进行回流和重绘，十分耗费性能，可能造成页面卡顿。

如何解决这个问题呢？

我们只需要引入一颗模拟了dom树的js对象树，通过操作js代替操作dom，将最终的虚拟节点渲染出来，从而节省性能

这个技术就叫做虚拟dom（virtual Dom）

virtual Dom可以看作一颗模拟了dom树的js对象树，主要是通过vnode（虚拟节点）模拟真实dom节点的结构
组件状态发生变化的时候，触发virtual Dom的数据变化，然后比对virtual Dom和真实DOM，在利用diff算法对真实dom进行更新，实质上就是一种模拟DOM的js数据结构

虚拟dom的使用基本流程

​ 1.获取数据
​ 2.创建vdom
​ 3. 通过render函数解析jsx（语法糖），将其转换成 vdom结构
​ 4.将vdom渲染成真实dom
​ 5.数据更改了
​ 6.使用diff算法比对两次vdom,生成patch对象（返回key）
​ 7.根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

优点：

保证性能下限： 框架的虚拟 DOM 需要适配所有PI 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；

无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；

跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

diff算法在写，明天更