虚拟 DOM 的 diff 算法是现代前端框架的核心机制之一，理解它的工作原理对于编写高性能 Vue/React 应用至关重要。让我们从计算机科学的角度剖析 diff 算法的本质。
一、算法设计目标
diff 算法的核心目标是以最小的 DOM 操作代价更新视图。其设计遵循两个基本原则：
- 同级比较原则：只比较同一层级的节点，不跨层级比较
- 最小化操作原则：寻找从旧树到新树的最小编辑距离
二、算法核心流程
1. 树比较策略
传统树 diff 算法的时间复杂度是 O(n³)，这对于前端场景不可接受。虚拟 DOM 通过以下优化实现 O(n) 复杂度：
function diff(oldTree, newTree) {
// 1. 节点类型不同 → 直接替换
if (oldTree.tag !== newTree.tag) {
replaceNode(oldTree, newTree)
return
}
// 2. 节点类型相同 → 比较属性
patchProps(oldTree, newTree)
// 3. 比较子节点（关键优化所在）
diffChildren(oldTree.children, newTree.children)
}
2. 列表对比优化
子节点对比是性能瓶颈所在，算法采用双指针策略：
function diffChildren(oldChildren, newChildren) {
let oldStartIdx = 0, newStartIdx = 0
let oldEndIdx = oldChildren.length - 1
let newEndIdx = newChildren.length - 1
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 四种特殊情况的快速判断
if (isSameNode(oldChildren[oldStartIdx], newChildren[newStartIdx])) {
// 情况1：头头相同
patch(oldChildren[oldStartIdx], newChildren[newStartIdx])
oldStartIdx++
newStartIdx++
}
else if (isSameNode(oldChildren[oldEndIdx], newChildren[newEndIdx])) {
// 情况2：尾尾相同
patch(oldChildren[oldEndIdx], newChildren[newEndIdx])
oldEndIdx--
newEndIdx--
}
else if (isSameNode(oldChildren[oldStartIdx], newChildren[newEndIdx])) {
// 情况3：旧头新尾 → 需要移动
moveNode(oldChildren[oldStartIdx], newChildren[newEndIdx])
oldStartIdx++
newEndIdx--
}
else if (isSameNode(oldChildren[oldEndIdx], newChildren[newStartIdx])) {
// 情况4：旧尾新头 → 需要移动
moveNode(oldChildren[oldEndIdx], newChildren[newStartIdx])
oldEndIdx--
newStartIdx++
}
else {
// 常规情况处理
handleUnkeyedItems(oldChildren, newChildren)
}
}
// 处理新增/删除的节点
processRemainingNodes()
}
三、key 的算法意义
key 在算法中扮演节点身份标识符的角色：
function isSameNode(a, b) {
// key 是判断节点是否相同的首要条件
return a.key === b.key && a.tag === b.tag
}
当使用 index 作为 key 时：
初始列表: [A, B, C] → keys: [0, 1, 2]
新列表: [D, A, B, C] → keys: [0, 1, 2, 3]
diff 过程：
- 比较 key=0 的节点：A ≠ D → 误判为需要更新
- 比较 key=1 的节点：B ≠ A → 误判为需要更新
- 比较 key=2 的节点：C ≠ B → 误判为需要更新
- 发现 key=3 的新节点 → 创建 C
实际只需要创建 D 并移动 ABC，但算法误判为需要更新三个节点并创建一个新节点。
四、算法复杂度分析
| 操作类型 | 使用唯一 key | 使用 index |
|---|---|---|
| 头部插入 | O(1) | O(n) |
| 尾部插入 | O(1) | O(1) |
| 随机位置插入 | O(n) | O(n) |
| 删除 | O(1) | O(n) |
| 排序 | O(n) | O(n²) |
五、React 与 Vue 的 diff 差异
虽然核心思想相似，但实现有差异：
React：
- 采用 fiber 架构的双缓存机制
- 支持可中断的渐进式 diff
- 对列表使用更复杂的启发式算法
Vue：
- 更强调静态分析优化
- 对稳定子树跳过 diff
- 对列表使用双向查找算法
六、现代优化策略
- 静态提升：标记不会变化的节点
- 区块树：将动态内容压缩为单个区块
- SSR 水合优化：利用服务端渲染结果跳过部分 diff
结论
diff 算法的本质是通过智能的节点对比策略和巧妙的 key 设计，将 O(n³) 的树编辑距离问题转化为近似 O(n) 的高效更新。理解这一机制，才能正确使用 key 并编写出高性能的前端代码。
