Diff算法是什么？

你想要那颗糖

已于 2023-07-15 21:25:32 修改

阅读量391

点赞数 3

CC 4.0 BY-SA版权

分类专栏：面试官问 JavaScript 文章标签： diff javascript

于 2023-07-15 21:18:07 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/131740958

JavaScript 同时被 2 个专栏收录

63 篇文章

订阅专栏

面试官问

28 篇文章

订阅专栏

Diff算法用于对比新旧虚拟DOM树，通过精确识别变化的节点，只更新必要的部分，提高DOM操作效率。它避免跨级比较，将时间复杂度降低。当数据改变时，watcher调用patch方法，通过isSameVnode和patchVnode更新DOM。对于有子节点的情况，updateChildren函数负责匹配和更新子节点，确保高效更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Diff 算法是一种对比算法。对比两者是旧虚拟 DOM 和新虚拟 DOM，对比出是哪个虚拟节点更改了，找出这个虚拟节点并只更新这个虚拟节点所对应的真实节点而不用更新其他数据没发生改变的节点，实现精准地更新真实 DOM，进而提高效率

他的对比过程如下：

在新老虚拟 DOM 对比时：

首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
如果为相同节点，进行 patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)
比较如果都有子节点，则进行 updateChildren，判断如何对这些新老节点的子节点进行操作（diff 核心）。
匹配时，找到相同的子节点，递归比较子节点

在 diff 中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从 O(n3)降低值 O(n)，也就是说，只有当新旧 children 都为多个子节点时才需要用核心的 Diff 算法进行同层级比较。

虚拟 DOM 算法和真实 DOM 算法比较：

使用虚拟 DOM 算法的损耗计算：总损耗 = 虚拟 DOM 增删改 +（与 Diff 算法效率有关）真实 DOM 差异增删改+（较少的节点）排版与重绘

直接操作真实 DOM 的损耗计算：总损耗 = 真实 DOM 完全增删改 +（可能较多的节点）排版与重绘

小结：

当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作：
- 找到对应的真实dom，称为el
- 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
- 如果oldVnode有子节点而VNode没有，则删除el子节点
- 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
- 如果两者都有子节点，则执行updateChildren函数比较子节点
updateChildren主要做了以下操作：
- 设置新旧VNode的头尾指针
- 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作