为什么虚拟dom会提高性能？

概念：虚拟dom相当于在js和真实的dom中间加了一个缓存，利用dom 的diff算法避免了没有必要的dom操作，从而提高了性能。

为什么一定要用虚拟dom？
        你用传统的原生api或jquery去操作dom时，浏览器会从构建dom树开始，从头到尾执行一遍流程。

真实dom的执行流程：用js对象表示真实的dom结构，当状态发生变化的时候，会重新创建一个虚拟dom树的结构，然后用新的树和旧的树进行比较，记录两颗树的差异，把所记录的差异应用到所构建的真实的dom树上，视图就更新了。

概括来说：模板——>渲染函数——>虚拟dom树——>真实dom。

举例说明渲染过程？
        当你一次需要更新10个dom节点，浏览器没有这么智能，它会在接收到第一个dom节点之后，并不知道后续还有九次更新的操作，因此会马上执行流程，因此会马上执行流程，最终执行10次流程。

而通过vnode，同样更新10个dom节点，虚拟dom不会立即进行操作，而是将这10次更新的diff内容保存到本地的一个js对象上，最终将这个js对象一次性的attach到dom树上，避免了大量的无谓的操作。

很多人认为虚拟dom最大的优势是diff算法，减少了javascript操作真实dom的带来的性能的消耗。虽然这是虚拟dom带来的优势，但是这不是全部的优势，虚拟dom最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的dom，可以是安卓和ios的原生组件，可以是近期很火热的小程序，也可以是各种GUI。

vue的虚拟dom是怎样的执行流程？
        vue.js是通过编译将模板渲染成函数，执行函数可以得到一个虚拟节点。在对dom进行操作的时候，会触发对应的dep中的watcher对象。wacther对象会调用对应的update来修改视图。

虚拟dom实现的原理三部分？
        用javascript对象模拟真实的dom树，对dom进行抽象。

        diff算法——比较两个虚拟dom树的差异

        pach算法——将两个虚拟dom对象的差异更新到真实的dom树。（pathc也叫patching，算法，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果，找出需要更新的节点进行更新。）

虚拟dom的好处？
        降低浏览器的性能的消耗：javascript的运行速度远大于dom操作的执行速度，因此，运行patching算法来计算出真正的需要更新的节点，最大限度地减少了dom操作。

减少回流和重绘：通过diff算法，减少回流和重塑，通过diff算法优化遍历，对真实的dom进行打补丁式的新增、修改、删除、实现局部更新，减少回流和重绘等操作。用diff算法，减少了回流和重绘。

跨平台：虚拟dom本质上是js对象，相比之下虚拟dom，可以进行更方便的跨平台操作，例如浏览器的渲染、node、weex开发等。