【前端每天一题】🔥 第 24 题：Virtual DOM 中 diff 算法的核心流程（详细版

第 24 题：Virtual DOM 中 diff 算法的核心流程（详细版）

下面是详细讲解（不画图、不引用图片）：

24. Virtual DOM 的 Diff 算法核心流程（详细版）

Diff（差异对比）算法是 Virtual DOM 的核心，用来比较新旧两棵虚拟 DOM 树的不同，最终只把差异更新到真实 DOM，从而提升性能。

以下分 6 个步骤讲清楚整个流程：

① 第一层优化：同层比较，不跨层

虚拟 DOM 永不跨层比较：

旧树第 1 层只对比新树第 1 层
旧树第 2 层只对比新树第 2 层
......

原因： 浏览器真实 DOM 结构很少跨层变动，所以避免跨层，大幅减少计算量。

② 第二层优化：节点类型不同 → 整个节点直接替换

判断两个节点是否"同类型"，主要看：

判断内容	示例
标签是否相同	div → div
组件是否相同	MyComponent → MyComponent
key 是否一致	key="1" → key="1"

如果节点类型不同直接整棵替换：

css 复制代码

<div> → <span>

不用再继续往下比较 children。

③ 节点类型相同 → 继续比较属性（props）

例如两个 div：

ini 复制代码

<div id="a" class="x">
<div id="b">

Diff 会：

找出删除的属性
找出新增的属性
找出修改的属性

最终生成类似补丁：

kotlin 复制代码

PATCH {
  remove class
  update id: a → b
}

④ 比较 Children（最复杂的部分）

子节点可能会：

增加
删除
移动
更新内容

其中列表渲染 v-for 的 diff 最复杂，需要 key。

Vue Diff 对 children 会做三类操作：

（1）同位置比较（前置指针）

从左往右一个一个比：

旧：A B C D

新：A B E D

前两个一致，跳过

到第三个不一致，执行更新

（2）尾部比较（后置指针）

从右往左比：

旧：A B C D

新：E B C D

尾部 D、C、B 都一样

只需处理最前面的 A 、E。

这种前后双指针优化减少很多循环。

（3）核心：key 的最长递增子序列（LIS）优化移动

这是最精华部分。

举例：

旧节点：A B C D

新节点：B A D C

为了尽量减少"移动 DOM 次数"，Vue 会：

先计算每个旧节点在新列表中的下标映射。
找出最长递增子序列（LIS），这些节点不动。
剩下的节点才需要移动。

这样 DOM 操作最少，性能最好。

⑤ 生成补丁（patch）列表

patch 列表包含：

哪些节点要删除
哪些要新增
哪些要移动
哪些属性要更新
哪些文本要替换

最终所有操作都是对真实 DOM 的最小修改集。

⑥ 执行 patch，更新真实 DOM

最后一步由渲染器完成：

删除 DOM
插入 DOM
更新属性
设置文本内容
移动节点位置

这一步才真正发生浏览器的重绘/回流。

总结（背诵用）

Diff 算法核心 6 步：

同层对比，不跨层
节点类型不同 → 整个替换
节点类型相同 → 更新属性
比较 children：前置/后置/Key+LIS
生成最小修改补丁（patch）
执行 patch 更新真实 DOM

如果你要，我可以继续：

✅ 用图示方式讲

✅ 用代码模拟一次完整的 diff 流程

✅ 用实际 Vue 代码展示 diff 如何触发

你要哪个？