Diff算法的简单介绍

原生 DOM 更新

graph LR    A[数据变化] --> B[手动查找DOM节点]    B --> C[直接修改节点属性]    C --> D[处理相关依赖节点]Diff 算法更新

graph LR    A[应用状态变更] --> B[生成新的虚拟 DOM 树]    B --> C[Diff 算法比较新旧树]    C --> D[计算最小变更集]    D --> E[批量更新真实 DOM]什么是 Diff 算法？

Diff 算法（差异算法） 是一种用于比较两个树形结构（通常是虚拟 DOM 树）之间的差异，并计算出最小变更集的高效算法。它是现代前端框架（如 React, Vue, Angular 等）实现高性能渲染的核心机制之一。
核心思想

• 比较对象：比较的是内存中表示 UI 结构的 JavaScript 对象（虚拟 DOM 树），而非直接操作浏览器中笨重的真实 DOM。
  
• 找出差异：精确找出新旧两棵虚拟 DOM 树中哪些节点发生了变化（增、删、改、移）。
  
• 最小化操作：只将必要的、最少的变更应用到真实 DOM 上，避免不必要的渲染开销。
  

Diff 算法的作用

• 性能优化（核心作用）:
  
  
  
  • 减少 DOM 操作成本：直接操作真实 DOM（尤其是涉及布局重排和重绘）是浏览器中最昂贵的操作之一。Diff 算法确保只更新真正变化的部分。
    
  • 批量更新：框架可以将 Diff 计算出的多个变更集合并成一次批量的 DOM 操作，进一步提高效率。
    
  • 避免全量更新：无需在每次状态变化时都销毁整个旧 DOM 树并重建整个新 DOM 树。
    
  
  
• 简化开发逻辑:
  
  
  
  • 声明式编程：开发者只需关注“目标 UI 状态应该是什么样子”（描述新的虚拟 DOM），而无需手动编写繁琐的“如何从当前状态变过去”的命令式代码（如 document.getElementById(...).appendChild(...)）。Diff 算法和渲染引擎自动处理更新过程。
    
  • 关注点分离：开发者聚焦于业务逻辑和状态管理，框架负责高效的 UI 更新。
    
  
  
• 跨平台能力的基础:
  
  
  
  • 虚拟 DOM 和 Diff 算法提供了一层抽象。计算出的最小变更集不仅可以应用于浏览器 DOM，也可以应用于 Native 组件（React Native）、Canvas、WebGL，甚至服务端渲染。
    
  
  

为什么需要实现 Diff 算法？

实现 Diff 算法是为了解决直接操作真实 DOM 带来的严重性能瓶颈和开发体验问题：

• 直接操作 DOM 的代价高昂：
  
  
  
  • 每次 DOM 操作（尤其是修改布局属性）都可能触发浏览器的 重排（Reflow） 和 重绘（Repaint） ，这是非常消耗 CPU 和 GPU 资源的操作。
    
  • 频繁或低效的 DOM 更新会导致界面卡顿、响应迟缓，用户体验变差。
    
  
  
• 手动更新 DOM 复杂且易错：
  
  
  
  • 在复杂的 Web 应用中，随着状态变化，需要精确计算出哪些 DOM 元素需要添加、删除、修改属性或移动位置。
    
  • 手动编写这些更新逻辑极其繁琐、容易出错，且代码难以维护。例如，在一个动态列表中插入一项，可能需要精确找到插入点、更新后续元素的索引、处理动画状态等。
    
  
  
• 全量更新不可行：
  
  
  
  • 最简单粗暴的更新方式是：销毁整个旧的 DOM 树，然后用新的状态重建并插入整个新的 DOM 树。
    
  • 这种方法在简单静态页面上也许可行，但对于复杂动态应用：
    
    
    
    • 性能灾难：销毁和重建整个树的开销巨大，导致界面严重闪烁或卡死。
      
    • 状态丢失：输入框焦点、滚动条位置、组件内部状态（如视频播放进度）等都会被重置，破坏用户体验。
      
    
    
  
  

Diff 算法的优势解决方案

• 虚拟 DOM：轻量级的中间层：
  
  
  
  • 在内存中创建真实 DOM 的轻量级 JavaScript 对象表示。创建和操作 JS 对象远比操作真实 DOM 快得多。
    
  • 状态变化时，先创建新的虚拟 DOM 树。
    
  
  
• Diff：计算最小变更：
  
  
  
  • 使用优化过的 Diff 算法（通常是 O(n) 复杂度）对比新旧虚拟 DOM 树。
    
  • 精准找出节点级别的差异（元素类型变化？属性变化？子节点顺序变化？）。
    
  
  
• 高效更新：
  
  
  
  • 将 Diff 计算出的 “补丁”（Patch） 应用到真实 DOM 上。
    
  • 只更新变化的部分，最大程度减少昂贵的 DOM 操作和重排/重绘。
    
  
  

原生 DOM 操作的"精确更新"假象（作用的补充说明）

在原生 JavaScript 中，开发者确实可以手动精确更新特定节点：

1. // 原生 DOM 精确更新示例
2. const priceElement = document.getElementById("product-price");
3. priceElement.textContent = newPrice;

复制代码

表面优势：

• 只更新一个节点
  
• 没有额外开销
  
• 性能看似高效
  

实际挑战：

• 状态追踪复杂度：在大型应用中，需要手动维护数百个元素引用
  
• 依赖关系管理：当多个数据影响同一元素时，更新逻辑变得复杂
  
• 动态内容处理：列表渲染、条件渲染需要大量手动 DOM 操作
  
• 跨组件更新：深层嵌套组件更新需要穿透多层结构
  

特性原生 DOM 操作Vue 更新机制更新范围开发者手动控制组件级渲染 + Diff 优化状态管理手动维护引用响应式系统自动追踪列表更新手动操作每个元素Key 优化 + 最小变更条件渲染手动添加/移除节点自动 DOM 操作性能开销无框架开销虚拟 DOM 比较开销开发效率低（代码量大）高（声明式编程）可维护性随复杂度下降始终保持良好跨平台需重写逻辑同一套代码Vue 中的 Diff 算法工作原理

组件级颗粒度

• 当响应式数据变化时，Vue 会：
  
  
  
  • 标记依赖该数据的组件为"待更新"
    
  • 触发这些组件的重新渲染
    
  1. // Vue 3 响应式更新伪代码
  2. effect(() => {
  3.   if (state.dirty) {
  4.     patchComponent(component); // 更新组件
  5.   }
  6. });

  复制代码
• 未受影响的组件不会重新渲染，保持高性能
  

节点级颗粒度（Diff 核心）

在组件内部，Vue 使用优化后的 Diff 算法：

• 同级比较：只比较相同层级的节点
  
• 标签类型检查：
  1.   →
  2.   <section>
  3.    
  4.    
  5.       →
  6.       
  7.    
  8.   </section>

  复制代码
• Key 优化策略（列表渲染核心）：
  1. <li v-for="item in items">{{ item }}</li>
  4. <li v-for="item in items" :key="item.id">{{ item.name }}</li>

  复制代码

Vue 3 的突破性优化

Vue 3 通过编译时优化解决颗粒度问题：
flowchart LR    A[模板] --> B[编译优化]    B --> C[静态提升]    B --> D[Patch Flags]    B --> E[Block Tree]

• 静态提升：将静态内容移出渲染函数
  
• Patch Flags：标记动态节点类型
  1. // 编译后的虚拟DOM节点
  2. {
  3.   type: 'div',
  4.   props: { class: 'active' },
  5.   patchFlag: 1 // 1表示只有class是动态的
  6. }

  复制代码
• Block Tree：追踪动态节点树，跳过静态子树比较
  

Diff 算法的关键优化策略

1. 列表渲染与 key 的重要性

颗粒度问题最明显的场景：

1. <ul>
2.   <li v-for="item in items">{{ item.text }}</li>
3. </ul>
6. <ul>
7.   <li v-for="item in items" :key="item.id">{{ item.text }}</li>
8. </ul>

复制代码

• 无 key：默认使用"就地复用"策略，可能导致状态错乱
  
• 有 key：精确匹配节点，保持组件状态（如输入框内容）
  

2. 组件复用策略

Vue 通过组件签名决定是否复用：

1. // 决定组件复用的关键因素
2. function canPatch(oldVNode, newVNode) {
3.   return (
4.     oldVNode.type === newVNode.type && // 相同组件
5.     oldVNode.key === newVNode.key // 相同key
6.   );
7. }

复制代码

3. 静态内容跳过

Vue 3 的突破性改进：

1.   
2.   <header>Site Title</header>
4.   
5.   <main>{{ dynamicContent }}</main>

复制代码

• Diff 算法完全跳过静态节点比较
  
• 性能接近手动优化的 DOM 操作
  

为什么 Vue 需要 Diff 算法？

• 解决颗粒度鸿沟：弥合细粒度的数据变化与粗粒度的 UI 更新之间的差距
  
• 开发体验优先：让开发者专注于业务逻辑，无需手动优化 DOM 操作
  
• 平台抽象层：为 SSR、小程序等目标平台提供统一更新机制
  
• 性能与效率平衡：在框架开销与手动优化成本间取得最佳平衡点
  

性能对比基准

更新方式1000 节点更新时间内存开销开发成本直接 DOM 操作10ms低极高全量虚拟 DOM50ms高低Vue 3 优化 Diff15ms中低总结

• 在内存中（虚拟 DOM）进行高效的差异计算。
  
• 找出新旧 UI 表示之间的最小变更集。
  
• 只将必要的更新应用到昂贵的真实 DOM 上。
  

vue2 双端比较算法（双指针 diff）简单示例，主要是处理 v-for 关键之一：

[code]function sameVNode(a, b) {  return a.key === b.key && a.tag === b.tag;}function updateChildren(parentEl, oldCh, newCh) {  let oldStartIdx = 0;  let newStartIdx = 0;  let oldEndIdx = oldCh.length - 1;  let newEndIdx = newCh.length - 1;  let oldStartVnode = oldCh[0];  let oldEndVnode = oldCh[oldEndIdx];  let newStartVnode = newCh[0];  let newEndVnode = newCh[newEndIdx];  // 创建旧节点 key 映射  const keyMap = {};  for (let i = oldStartIdx; i