snabbdom 源码调试总结

snabbdom 源码调试总结

在Vue.js 中的虚拟 DOM 借鉴了 Snabbdom,目的是为了让开发人员避免复杂的 DOM 操作也为了跨不同平台。

使用 Virtual DOM，在首次渲染的时候会影响性能因为要创建额外的对象来描述真实 DOM，在更新少量标签的时候也不会有性能上的提升，在 DOM 结构复杂的时候更新 DOM，会有性能的提升，因为仅仅会把前后两次 DOM 树的差异，更新到真实 DOM。

Snabbdom 中的 h函数，类似于 Vue.js 中 render 的 h 参数，都是用来创建 VNode 节点的。

createElm函数的作用是把 VNode 转换成 DOM 对象，但是没有把新创建的 DOM 挂载到 DOM 树，而是先存储到当前 VNode 对象的 elm 属性中，并返回新创建的 DOM 对象。

patch 函数是通过 Snabbdom 的入口函数 init 生成的，init 中初始化模块和 DOM 操作的 api，最终返回 patch，这里的init 是一个高阶函数，在 init 函数内部缓存了两个参数，在返回的 patch 函数中可以通过闭包访问到 init 中初始化的模块和 DOM 操作的 api。patch 函数中如果第一个参数是 DOM 对象的话，不会对比两个VNode，而是把新的 VNode 直接转换成真实 DOM ，插入到 DOM 树中，再从 DOM 树移除对应的老节点。

patchVnode 的作用是对比新旧两个 VNode 节点差异，如果两个节点都没有 text 属性再去对比他们的子节点，如果有 text 属性并且新旧 VNode 的 text 不相等，这时候把新节点的 text 属性更新到 DOM 上。

updateChildren 函数的作用是对比新旧 VNode 节点的子节点，在对比的过程中因为 DOM 操作的特殊性，同时也为了优化操作，所以只对比两颗树中的同一层级的子节点。给 VNode 设置 key 之后，当在对元素列表排序，或者给列表项插入项的时候会重用上一次对应的 DOM 对象，减少渲染次数，因此会提高性能。