虚拟 DOM 和 diff 算法 —— 精细化比较

本文主要是介绍虚拟 DOM 和 diff 算法 —— 精细化比较，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 这一篇来讲五角星部分，diff算法最精华的内容：

 子节点更新策略

一、经典的diff算法优化策略

•   四种命中查找：（按照顺序排列）（四个指针）

        命中一种就不再继续往下命中判断了

        如果当前没有命中，就继续往下命中判断

        如果都没有命中，就只能用循环来寻找了

    1. 新前与旧前

    2. 新后与旧后

    3. 新后与旧前

    4. 新前与旧后

    新前：新 DOM 未处理的节点的第一个节点

    新后：新 DOM 未处理的最后一个子节点

    旧前：旧 DOM 未处理的第一个节点

    旧后：旧 DOM 未处理的最后一个子节点

•   新增的情况：

•  删除的情况：

•   删除的情况2：

四种都没有命中，那么会循环旧子节点，然后虚拟DOM就会把 D 的位置移动到的B的后面，旧子节点的 D 的位置 置为 undefined，再次进行命中，剩下 C 和 E 就是要删除的节点。

•  复杂的情况

 循环旧子节点，会找到新前指向的节点，把它移动到旧前之前，然后

• 多删除的情况

 代码链接：https://gitee.com/LeiWenrui/snabbdom-demo

这篇关于虚拟 DOM 和 diff 算法 —— 精细化比较的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！