虚拟DOM（Virtual DOM）

一个页面的加载过程：

1. 解析html，生成dom树
2. 解析css，生成css规则树
3. 将dom树和css连接，生成render树
4. 布局，浏览器会为render树上的每个节点确定在屏幕上的尺寸、位置
5. 绘制Render树，绘制页面像素信息到屏幕上，这个过程叫paint

在JavaScript和JQuery的情况下操作DOM节点，浏览器会从构建DOM树开始将整个流程执行一遍，所以频繁操作DOM会引起不需要的计算，导致页面卡顿，影响用户体验；

而虚拟DOM会用JavaScript对象表示virtual node(虚拟节点)，根据VNode 计算出真实DOM需要做的最小变动，然后再操作真实DOM节点，提高渲染效率。

工作原理：

1. 通过JavaScript模拟DOM树，并渲染DOM树
2. 将新旧DOM树进行对比，记录不同点
3. 把不同点渲染到DOM树上