虚拟DOM

虚拟DOM其实一种通过js生成的AST的节点树，也可以称为真正的树形结构。
在这之前我们还要了解什么是dom树，下面是浏览器解析页面时的流程：

1. 解析html：解析html文档，并构建dom树; // DOM 树表示 HTML 文档中元素之间的层次关系。
2. 解析css：解析css样式,并构建cssom树; // CSSOM 树表示样式之间的层次关系和作用范围。
3. 生成渲染树：浏览器将dom树喝cssom树合并，生成渲染树，渲染树包含了所有需要渲染的元素以及元素的样式信息;但不包含不需要渲染的元素;
4. 布局：浏览器遍历渲染树，计算每个元素的位置和大小等布局信息，生成布局树;
5. 绘制：浏览器遍历布局树，将每个元素绘制到屏幕上，生成位图;
6. 合成：浏览器将位图按照z-index顺序合成图层，最终显示在屏幕上。

如果使用原生js或者jq的操作dom的话，每次都会引发dom的重流与重绘。
虚拟dom就是为了解决这个问题而出现的，对比每次更新(diff)的内容，然后更新的节点内容更新到dom上。
所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

diff算法

Virtual DOM 渲染成真实的 DOM 实际上要经历 VNode 的定义、diff、patch 等过程; 这些过程要么保留原始节点，要么移动节点。