JavaScript 中的 diff 算法核心是高效识别虚拟 DOM 树的最小变更集，通过双端比较与 key 映射复用节点，避免全量重渲染；它不比对字符串，而是基于节点类型、key 和结构语义进行启发式协调。
JavaScript 中的 diff 算法，核心目标不是“逐字符比对文本”，而是高效识别两个结构（尤其是树状结构，如虚拟 DOM）之间的最小变更集，从而避免全量重渲染。它不追求找出所有差异，而是用启发式策略快速定位可复用的部分，以提升性能。
diff 的典型场景：虚拟 DOM 更新
React、Vue 等框架在状态变化后，会生成一棵新的虚拟 DOM 树，再与旧树对比——这个过程就是 diff。它关注的是节点类型、key、属性、子节点等是否变化，而非字符串层面的编辑距离。
- 如果节点类型不同（比如
div→span），直接替换整个子树 - 如果类型相同且有
key，优先按 key 做映射，实现元素复用（如列表项移动、增删） - 如果类型相同但无 key，则按位置逐一对比子节点（简单但易误判）
核心策略：双端比较 + key 映射
现代实现（如 React 16+ 的 Fiber reconciler）采用“双端同时比对”优化：从新旧两棵树的头、尾四个端点开始匹配，尽可能复用已有节点。
- 先比对新旧头节点 → 匹配则推进头指针
- 再比对新旧尾节点 → 匹配则回退尾指针
- 再试新头 vs 旧尾、新尾 vs 旧头 → 支持节点翻转（如数组 reverse）
- 若以上都不匹配，查旧节点中是否有 key 相同者 → 有则移动，无则新建
一个极简手动 diff 示例（列表更新）
假设有旧列表 [{id:1}, {id:2}, {id:3}]，新列表 [{id:2}, {id:4}, {id:1}]：
立即学习“Java免费学习笔记（深入）”；
- 带 key 时：发现 id=2 可复用（移动）、id=4 需新增、id=1 需移动，仅执行 2 次移动 + 1 次插入
- 无 key 时：默认按索引比对 → 全部视为“变更”，触发 3 次替换，效率低且丢失状态（如 input 光标）
注意：diff ≠ 文本 diff
像 diff-match-patch 这类库才是做字符串/文本的最小编辑操作（插入、删除、替换），适用于代码比对、协同编辑。而框架中的 diff 是针对对象结构的语义化协调，目标是渲染最优路径，不是生成 patch 字符串。
基本上就这些。关键不在“怎么比”，而在“为什么这么比”——一切围绕减少真实 DOM 操作、保留组件状态、保证更新可预测。
