虚拟DOM（vDom）

前言

js是解析引擎，页面渲染是渲染引擎，两个线程之间进行通信，操作越频繁，消耗的性能越多。所以虚拟DOM应运而生。虚拟DOM本质上就是一个js对象，可以提高页面渲染性能。

操作内存中的JS对象的速度显然要更快。

框架比对

React：虚拟DOM比对
Angular：脏检查技术
Vue：vue1没有引入虚拟DOM，采用的是和上面2钟框架都不一样的更细力度的检查流程（直接监听节点的状态变化），来绑定更新视图。产生大量的watcher实例，造成内存开销和依赖追踪的开销大。
vue2的时候采用中等力度的检查，只监听到组件变化，组件的内部就使用虚拟DOM进行状态比对，这就是DIFF算法。

vue虚拟DOM

产生流程

我们使用vue的模板语法编写html，vue有模板语法的解析函数，将html解析编译成渲染函数，渲染函数执行后就变成虚拟DOM节点树。

当虚拟DOM映射到视图的时候，为了避免不必要的性能开销，会先和上一次的虚拟DOM节点树进行比较，只渲染不同部分到视图中。

Diff算法

最主要的是节点比对算法-patch。
Diff算法只是为了虚拟DOM比较替换效率更高
利用js的DOM fragment来操作dom（统一计算出所有变化后统一更新一次DOM）进行浏览器DOM一次性更新。

vDom意义

vdom 的真正意义是为了实现跨平台，服务端渲染，以及提供一个性能还算不错 Dom 更新策略。