虚拟DOM Diff算法是前端框架实现高效DOM更新的核心逻辑，它的核心目标是减少直接操作真实DOM的次数，降低页面重绘重排带来的性能开销。当组件状态发生变化时，框架会先生成新的虚拟DOM树，再和旧的虚拟DOM树进行对比，找出两者之间的差异，最后只把这些差异更新到真实DOM上。
Diff算法的基本设计前提
Diff算法在设计时遵循几个核心前提，这些前提让算法的时间复杂度从O(n³)降到了O(n)，保证了对比的高效性：
- 只在同层节点之间进行对比，不会跨层级比较节点，因为跨层级的DOM移动在实际开发中场景很少，牺牲这部分场景可以大幅提升性能
- 如果新旧节点的标签类型不同，直接销毁旧节点，创建新节点，不会继续对比子节点
- 通过节点的唯一key值来识别可复用的节点，减少不必要的节点创建和销毁
节点对比的核心规则
Diff算法对比两个虚拟节点时，会按照以下规则处理：
1. 节点类型不同
如果新旧节点的tag属性不同，说明节点完全不可复用，此时会直接移除旧的真实DOM节点，然后根据新的虚拟节点创建对应的真实DOM节点插入到页面中。
2. 节点类型相同
如果新旧节点的标签类型一致，会先对比节点的属性，更新有变动的属性，然后再递归对比子节点列表。
3. 子节点对比
子节点的对比分为两种情况，一种是子节点是文本节点，直接对比文本内容是否一致；另一种是子节点是数组，此时会结合key值进行差异计算。
带key的子节点对比实现示例
以下是一个简化版的子节点Diff对比逻辑实现，展示了如何基于key值匹配可复用节点，计算需要移动、新增、删除的节点：
// 定义虚拟节点结构
function VNode(tag, props, children, key) {
this.tag = tag;
this.props = props || {};
this.children = children || [];
this.key = key || undefined;
}
// 对比两个子节点列表，返回差异操作
function diffChildren(oldChildren, newChildren) {
const oldKeyMap = new Map();
// 先建立旧子节点的key到索引的映射
oldChildren.forEach((child, index) => {
if (child.key) {
oldKeyMap.set(child.key, index);
}
});
const result = []; // 存储最终的新子节点顺序和对应的操作
let lastIndex = 0; // 记录上一个可复用节点在旧列表中的位置
// 遍历新的子节点列表
newChildren.forEach((newChild, newIndex) => {
const oldIndex = newChild.key ? oldKeyMap.get(newChild.key) : undefined;
if (oldIndex !== undefined) {
// 找到可复用的旧节点
const oldChild = oldChildren[oldIndex];
// 递归对比节点本身和子节点
const childDiff = diffVNode(oldChild, newChild);
result.push({
type: 'reuse',
node: newChild,
oldNode: oldChild,
diff: childDiff
});
// 如果旧节点的位置小于上一个可复用节点的位置，说明需要移动
if (oldIndex < lastIndex) {
result[result.length - 1].move = true;
}
lastIndex = Math.max(lastIndex, oldIndex);
} else {
// 新节点没有对应的旧节点，需要新增
result.push({
type: 'add',
node: newChild,
index: newIndex
});
}
});
// 找出旧子节点中需要删除的节点（没有在新列表中出现过的）
oldChildren.forEach((oldChild, oldIndex) => {
const hasMatch = newChildren.some(newChild => newChild.key === oldChild.key);
if (!hasMatch) {
result.push({
type: 'remove',
node: oldChild,
index: oldIndex
});
}
});
return result;
}
// 对比两个虚拟节点
function diffVNode(oldVNode, newVNode) {
if (oldVNode.tag !== newVNode.tag) {
return { type: 'replace', newNode: newVNode };
}
// 对比属性差异
const propDiff = diffProps(oldVNode.props, newVNode.props);
// 对比子节点差异
const childrenDiff = diffChildren(oldVNode.children, newVNode.children);
return {
type: 'update',
propDiff,
childrenDiff
};
}
// 简化版属性对比
function diffProps(oldProps, newProps) {
const diff = {};
// 找出新增和修改的属性
for (let key in newProps) {
if (oldProps[key] !== newProps[key]) {
diff[key] = newProps[key];
}
}
// 找出删除的属性
for (let key in oldProps) {
if (!newProps.hasOwnProperty(key)) {
diff[key] = undefined;
}
}
return diff;
}
Diff算法的实际应用注意事项
在实际开发中，合理使用key可以提升Diff算法的效率，需要注意以下几点：
- key值要保证唯一且稳定，不要使用数组索引作为key，因为数组排序、插入、删除时索引会变化，导致Diff算法无法正确匹配可复用节点
- 尽量避免跨层级的DOM节点移动，因为Diff算法不会处理跨层级的对比，这类操作会导致节点被销毁重建
- 对于静态节点，很多框架会做静态标记，Diff算法对比时会跳过这些节点，进一步提升性能
Diff算法的核心思想是通过最小化对比范围、利用节点标识复用节点，在保证功能正确的前提下最大化减少DOM操作次数，这也是前端框架性能优于直接操作DOM的重要原因之一。
虚拟DOMDiff算法JavaScript前端性能优化修改时间：2026-07-16 19:57:26