diff算法_双线程跑传统 diff 算法

大家好，我又双叒叕出现了……今天带来的文章是关于如何将 diff 和 patch 分别跑在双线程的

传统的方式：virtual-dom

vdom 的鼻祖，它通过在 diff 阶段生成 patches，然后 patch 阶段将 patches 应用到 dom 上

这个思路是可行的，微信小程序就直接将它的算法搬过来

但是其实这个算法的实现真的很原始，两次深度遍历，性能差，代码多

但是目前能分开遍历的，也就只有这一个思路不是吗？

snabbdom 等算法

vdom 发展到一定的阶段，就衍生出了 snanbbdom，ivi，inferno 这种，两端遍历的方式

但是这些库都是 diff patch 同时做，甚至 preact 直接不做 vdom 间的 diff

我现在需要用这个方法，但是 dom 传不到 worker 中，导致这些算法都用不了

所以现在的重点变成了：

怎样拆？

拆

if 

这是一段场景的 diff 的代码，我们看到，diff 和 patch 一起遍历，无非就是多了几个变量和方法

parent 

这些东西也正是无法从主线程传过来的

然后我想啊想，终于想到了一个方法，我们通过 index 建立映射，寻找 parent 和 node

比如上面的代码，它的 patches 最终长这样：

[ 

是的你没看错，我们用这里的 0 和 1 也就是 index 建立的映射，0 代表的是 rootDom

然后最终生成的 dom 结构可能长这样

<

如果此时删除掉 3，那 patch 应该是这样

[ 

刺激刺激，就这样，我们通过 vdom 与 dom 建立索引的思路，几乎可以复现所有的 diff 算法了

而且性能也比 virtual-dom 好得多（因为不需要遍历真实 dom）

总结

以上，介绍了主要思路，同样的思路可以用于任何跨端框架中

这里只是拿 snabbdom 举例，我也不会直接抄这个算法，具体的实现，还得看 voe 能搞到什么程度……

https://github.com/132yse/voe

放一下 github 的地址，欢迎关注与 讨论哈！