vue在官方文档中提到与react的渲染性能对比中，因为其使用了snabbdom而有更优异的性能。
JavaScript 开销直接与求算必要 DOM 操作的机制相关。尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点，但 Vue 的 Virtual Dom 实现（复刻自 snabbdom）是更加轻量化的，因此也就比 React 的实现更高效。
看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案，是不是很好奇snabbdom有何强大之处呢？不过正式解密snabbdom之前，先简单介绍下Virtual Dom。
什么是Virtual Dom
Virtual Dom可以看做一棵模拟了DOM树的JavaScript树，其主要是通过vnode,实现一个无状态的组件，当组件状态发生更新时，然后触发Virtual Dom数据的变化，然后通过Virtual Dom和真实DOM的比对，再对真实DOM更新。可以简单认为Virtual Dom是真实DOM的缓存。
为什么用Virtual Dom
我们知道，当我们希望实现一个具有复杂状态的界面时，如果我们在每个可能发生变化的组件上都绑定事件，绑定字段数据，那么很快由于状态太多，我们需要维护的事件和字段将会越来越多，代码也会越来越复杂，于是，我们想我们可不可以将视图和状态分开来，只要视图发生变化，对应状态也发生变化，然后状态变化，我们再重绘整个视图就好了。
这样的想法虽好，但是代价太高了，于是我们又想，能不能只更新状态发生变化的视图？于是Virtual Dom应运而生，状态变化先反馈到Virtual Dom上，Virtual Dom在找到最小更新视图，最后批量更新到真实DOM上，从而达到性能的提升。
除此之外，从移植性上看，Virtual Dom还对真实dom做了一次抽象，这意味着Virtual Dom对应的可以不是浏览器的DOM，而是不同设备的组件，极大的方便了多平台的使用。如果是要实现前后端同构直出方案，使用Virtual Dom的框架实现起来是比较简单的，因为在服务端的Virtual Dom跟浏览器DOM接口并没有绑定关系。
基于Virtual DOM 的数据更新与UI同步机制:
初始渲染时，首先将数据渲染为 Virtual DOM，然后由 Virtual DOM 生成 DOM。
数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。
Virtual DOM 作为数据结构，需要能准确地转换为真实 DOM，并且方便进行对比。
介绍完Virtual DOM，我们应该对snabbdom的功用有个认识了，下面具体解剖下snabbdom这只“小麻雀”。
snabbdom
vnode
DOM 通常被视为一棵树，元素则是这棵树上的节点（node），而 Virtual DOM 的基础，就是 Virtual Node 了。
Snabbdom 的 Virtual Node 则是纯数据对象，通过 vnode 模块来创建，对象属性包括：
sel
data
children
text
elm
key
可以看到 Virtual Node 用于创建真实节点的数据包括：
元素类型
元素属性
元素的子节点
源码：
//VNode函数，用于将输入转化成VNode /** * * @param sel 选择器 * @param data 绑定的数据 * @param children 子节点数组 * @param text 当前text节点内容 * @param elm 对真实dom element的引用 * @returns {{sel: *, data: *, children: *, text: *, elm: *, key: undefined}} */ function vnode(sel, data, children, text, elm) { var key = data === undefined ? undefined : data.key; return { sel: sel, data: data, children: children, text: text, elm: elm, key: key }; }
snabbdom并没有直接暴露vnode对象给我们用，而是使用h包装器，h的主要功能是处理参数:
h(sel,[data],[children],[text]) => vnode
从snabbdom的typescript的源码可以看出，其实就是这几种函数重载：
export function h(sel: string): VNode; export function h(sel: string, data: VNodeData): VNode; export function h(sel: string, text: string): VNode; export function h(sel: string, children: Array<VNode | undefined | null>): VNode; export function h(sel: string, data: VNodeData, text: string): VNode; export function h(sel: string, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
patch
创建vnode后，接下来就是调用patch方法将Virtual Dom渲染成真实DOM了。patch是snabbdom的init函数返回的。
snabbdom.init传入modules数组，module用来扩展snabbdom创建复杂dom的能力。
不多说了直接上patch的源码：