虚拟DOM的Diff算法通过同层比较、key识别、类型判断和属性更新策略，以O(n)时间复杂度最小化真实DOM操作。1. 仅对比同一层级节点，避免跨层移动导致的性能开销；2. 使用唯一key标识列表节点，防止不必要的重渲染；3. 节点类型不同时全量替换，简化比对逻辑；4. 相同类型节点则精细化更新属性与事件。该机制在开发体验与运行效率间实现平衡。
虚拟DOM的Diff算法是前端框架提升渲染性能的核心机制之一。它通过对比新旧两棵虚拟DOM树的差异，最小化地更新真实DOM，从而避免频繁、昂贵的直接操作。在JavaScript中，React等框架正是基于这一思想实现高效更新。下面从核心思路到具体策略，解析Diff算法的关键点。
只对比同一层级节点
为了降低时间复杂度，Diff算法默认采用“同层比较”策略。也就是说，在遍历虚拟DOM树时，只对同一层级的节点进行比较，不会跨层级移动元素。
- 这样可以把复杂的O(n³)对比降为O(n)，极大提升性能
- 如果某个节点在更新后不再出现在当前层级，会被直接销毁
- 跨层级移动（如把根节点下的div移到子组件内）不会被识别为移动，而是删除+新增
通过key识别节点身份
在处理列表或动态子节点时，key属性是Diff算法判断节点是否复用的关键依据。
- 没有key时，算法只能按顺序匹配，导致大量不必要的重新渲染
- 提供唯一且稳定的key（如id），能让算法精准识别哪些节点被添加、删除或移动
- 使用index作为key在列表排序或中间插入时会引发问题，应避免
类型不同时全量替换
当新旧节点的类型（标签名或组件类型）不一致时，Diff算法会直接销毁旧节点及其所有子节点，替换为新的节点结构。
立即学习“Java免费学习笔记（深入）”；
- 比如从
变成
，即使内容相似也会重建- 函数组件与类组件之间切换也视为不同类型
- 这种策略简化了逻辑，避免深层比对带来的开销
属性与事件的精细化更新
对于类型相同的元素节点，Diff会逐一对比属性（props），仅更新发生变化的部分。
- style、className、value等都会做差异检测
- 事件处理器通过引用比对决定是否重新绑定
- 文本节点内容变化会被直接赋值，不重建元素
基本上就这些。虚拟DOM Diff不是追求绝对最优更新路径，而是在可接受的时间内找到足够好的更新方案。理解这些核心原则，有助于写出更高效的组件，比如合理使用key、避免无谓的结构变更。本质上，它是一种工程上的权衡，用空间换时间，让开发体验和运行效率达到平衡。
