当一个网页加载的时候，流程如下
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算法在写，明天更
