《从虚拟 DOM 到 Diff 算法：深度解析前端高效更新的核心原理》-简版

最新推荐文章于 2025-05-22 21:11:03 发布

打小就很皮...

最新推荐文章于 2025-05-22 21:11:03 发布

阅读量1.1k

点赞数 38

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_70172010/article/details/148114592

版权

前端专栏收录该内容

38 篇文章

订阅专栏

一、开篇：用场景引出核心问题

问题引入：
假设你要开发一个 Todo List 应用，当用户添加或删除任务时，页面需要更新。如果直接操作真实 DOM，会面临哪些性能问题？（例如：频繁操作引发回流 / 重绘，JS 与 DOM 交互效率低）

解决方案铺垫：
虚拟 DOM（Virtual DOM）和 Diff 算法正是为解决这类问题而生。它们通过 “以 JS 对象模拟 DOM 结构 + 最小化真实 DOM 操作” 的方式，大幅提升前端应用的更新效率。

二、虚拟 DOM：用 JS 对象描述真实世界（基础概念解析）

1. 什么是虚拟 DOM？

本质：用 JavaScript 对象（或类）描述真实 DOM 的层级结构和属性，例如：

// 虚拟DOM示例（用对象表示一个<div>）
const vdom = {
  tag: 'div',
  props: { id: 'container', class: 'box' },
  children: [
    { tag: 'h1', props: {}, children: ['Hello Virtual DOM'] },
    { tag: 'p', props: {}, children: ['这是一段描述'] }
  ]
};

作用：
- 隔离真实 DOM：避免 JS 直接操作 DOM，降低性能损耗。
- 状态与视图解耦：通过 JS 对象的变化映射视图更新，符合现代框架（如 Vue/React）的响应式设计思想。

2. 虚拟 DOM 的工作流程

用流程图表示（文字描述）：

状态变更 → 生成新虚拟DOM（newVNode） → 
与旧虚拟DOM（oldVNode）对比（Diff算法） → 
生成差异补丁（Patch） → 
根据Patch更新真实DOM

JS对象表示真实DOM结构，要生成一个虚拟DOM，在用虚拟DOM构建一个真实DOM树，渲染到页面
状态改变生成新的虚拟DOM，在跟旧的虚拟DOM进行比对。这个比对过程就是diff算法，利用patch记录差异
把记录的差异用在第一个虚拟DOM生成的真实DOM上，视图就更新了

关键步骤解析：

首次渲染：
- 根据初始状态生成虚拟 DOM（JS 对象）。
- 通过虚拟 DOM 构建真实 DOM 树，插入页面（如 React 的ReactDOM.render、Vue 的$mount）。
更新阶段：
当数据变化时，重新生成新虚拟 DOM，与旧虚拟 DOM 对比，仅更新变化的部分（如文本内容、属性、子节点增减等）。

三、Diff 算法：如何快速找到虚拟 DOM 的差异？（核心原理拆解）

1. 什么是 Diff 算法？

定义：一种通过对比新旧虚拟 DOM，找出差异并生成更新补丁（Patch）的算法。
目标：用最小的成本（时间 / 性能）完成真实 DOM 更新，避免全量重新渲染。

2. Diff 算法的核心策略（重点！）

为降低比对复杂度，现代框架的 Diff 算法遵循以下优化策略：

层级对比：
- 只对比同一层级的节点，不跨层级对比（如 DOM 树的父子层级结构不会打乱重组）。
- 案例：若旧 DOM 是 <div><p>1</p></div>，新 DOM 是 <div><h1>2</h1></div>，Diff 算法只会对比<div>的子节点<p>和<h1>，不会对比<div>与其他层级节点。
标签比对：
- 若节点标签（如div、p）不同，直接删除旧节点，创建新节点（无需深入对比子节点）。
- 案例：旧节点是<p>，新节点是<h1>，Diff 算法会直接替换，而非尝试修改<p>的标签。
Key 优化：
- 为列表项指定唯一key，帮助 Diff 算法识别哪些节点可复用，哪些需新增 / 删除。
- 反例：若列表项未设置key，Diff 算法可能误判节点位置，导致不必要的 DOM 操作（如移动节点而非复用）。

3. Diff 算法的执行流程

生成差异补丁（Patch）：

遍历新旧虚拟 DOM 节点，记录差异类型（如文本更新、属性变更、子节点增减等）。
Patch 结构示例：

const patch = {
  type: 'UPDATE', // 差异类型（UPDATE/ADD/REMOVE）
  props: { class: 'active' }, // 属性变更
  children: [newVNode1, newVNode2] // 新子节点列表
};

应用补丁到真实 DOM：

根据 Patch 信息，执行对应的 DOM 操作（如textContent修改文本、setAttribute修改属性、appendChild/removeChild处理子节点）。

四、虚拟 DOM 与 Diff 算法的优缺点分析（深化理解）

优点

性能提升：减少真实 DOM 操作次数，避免频繁回流 / 重绘。
跨平台适配：虚拟 DOM 可渲染到不同平台（如浏览器、小程序、SSR），只需修改渲染器（Renderer）。
状态管理友好：将视图更新抽象为 JS 对象的变化，便于结合状态管理库（如 Redux、Pinia）使用。

缺点

学习成本：需要理解虚拟 DOM 的抽象概念和 Diff 算法的工作原理。
内存开销：虚拟 DOM 本身是 JS 对象，大型应用可能产生一定内存占用。

五、实战：用原生 JS 模拟虚拟 DOM 与 Diff 算法

一、虚拟 DOM 渲染器：`render(vnode)`

作用：将虚拟 DOM 对象（JS 对象）转换为真实 DOM 元素。
参数：vnode 是虚拟 DOM 对象，结构示例：

{ tag: 'div', props: { id: 'app' }, children: ['Hello'] }

代码逐行解析：

function render(vnode) {
  // 1. 创建真实DOM元素
  const dom = document.createElement(vnode.tag); // 根据tag（如'div'）创建元素

  // 2. 处理元素属性（如id、class、src等）
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      // 将虚拟DOM中的props映射到真实DOM的属性
      dom.setAttribute(key, vnode.props[key]);
    });
  }

  // 3. 处理子节点（递归渲染子虚拟DOM或文本节点）
  vnode.children.forEach(child => {
    // 子节点可能是字符串（文本节点）或子虚拟DOM对象
    const childDom = typeof child === 'string' 
      ? document.createTextNode(child) // 字符串转为文本节点
      : render(child); // 子虚拟DOM递归调用render生成真实DOM
    dom.appendChild(childDom); // 将子节点添加到当前元素
  });

  return dom; // 返回生成的真实DOM元素
}

关键点：

递归处理子节点：无论子节点是文本还是嵌套的虚拟 DOM，都能通过递归渲染为真实 DOM。
属性映射：直接通过setAttribute设置 DOM 属性，支持类名（class）、样式（style）等。

二、Diff 算法：`diff(oldVnode, newVnode)`

作用：对比新旧虚拟 DOM，生成差异补丁（Patch）。
参数：

oldVnode：旧虚拟 DOM 对象
newVnode：新虚拟 DOM 对象
返回值：Patch 对象，描述差异类型和细节。

代码逻辑拆解：

function diff(oldVnode, newVnode) {
  const patch = {}; // 存储差异补丁

  // 1. 标签不同：直接替换整个节点
  if (oldVnode.tag !== newVnode.tag) {
    patch.type = 'REPLACE'; // 差异类型：替换
    patch.newNode = newVnode; // 新虚拟DOM，用于生成新真实DOM
    return patch; // 提前返回，无需继续对比
  }

  // 2. 处理属性变更（含新增和删除属性）
  const propsPatch = {}; // 存储属性差异

  // 2.1 遍历新属性，记录变更或新增的属性
  Object.keys(newVnode.props).forEach(key => {
    const oldValue = oldVnode.props?.[key]; // 旧属性值（可能不存在）
    const newValue = newVnode.props[key]; // 新属性值
    if (newValue !== oldValue) { // 新旧值不同时记录差异
      propsPatch[key] = newValue;
    }
  });

  // 2.2 遍历旧属性，记录已删除的属性（新属性中不存在的旧属性）
  Object.keys(oldVnode.props || {}).forEach(key => {
    if (!newVnode.props?.hasOwnProperty(key)) { // 新属性中无此键
      propsPatch[key] = null; // 用null标记删除属性
    }
  });

  // 2.3 若有属性差异，记录到patch中
  if (Object.keys(propsPatch).length > 0) {
    patch.type = 'UPDATE'; // 差异类型：更新属性
    patch.props = propsPatch; // 存储属性变更详情
  }

  // 3. 处理子节点差异（简化逻辑，仅处理文本节点和数组子节点）
  const oldChildren = oldVnode.children;
  const newChildren = newVnode.children;

  // 3.1 新子节点是字符串（文本节点）
  if (typeof newChildren === 'string') {
    // 旧子节点不是字符串，或字符串内容不同时，更新文本
    if (typeof oldChildren !== 'string' || oldChildren !== newChildren) {
      patch.type = 'TEXT'; // 差异类型：文本更新
      patch.text = newChildren; // 新文本内容
    }
  } 
  // 3.2 新子节点是数组（虚拟DOM列表）
  else if (Array.isArray(newChildren)) {
    // 简化处理：直接标记为子节点替换（实际应实现列表Diff，如key匹配）
    patch.type = 'CHILDREN'; // 差异类型：子节点列表更新
    patch.children = newChildren; // 新子节点列表
  }

  return patch; // 返回最终差异补丁
}

核心策略：

层级优先：只对比同一层级节点，不跨层级。
标签优先：标签不同时直接替换，避免无效对比（如div和p节点无需对比子节点）。
属性优化：通过两次遍历（新属性和旧属性），精准记录新增、修改和删除的属性。

三、补丁应用：`patchDOM(dom, patch)`

作用：根据 Diff 生成的补丁（Patch），更新真实 DOM。
参数：

dom：需要更新的真实 DOM 元素（对应旧虚拟 DOM 生成的 DOM）
patch：Diff 算法返回的差异补丁

代码逻辑解析：

function patchDOM(dom, patch) {
  switch (patch.type) {
    // 1. 替换节点（标签不同或整节点替换）
    case 'REPLACE': {
      const newDom = render(patch.newNode); // 根据新虚拟DOM生成新真实DOM
      dom.parentNode.replaceChild(newDom, dom); // 用新DOM替换旧DOM
      break;
    }

    // 2. 更新节点属性或子节点
    case 'UPDATE': {
      // 2.1 处理属性变更
      if (patch.props) {
        Object.keys(patch.props).forEach(key => {
          const value = patch.props[key];
          if (value === null) {
            dom.removeAttribute(key); // 值为null时删除属性
          } else {
            dom.setAttribute(key, value); // 否则更新属性
          }
        });
      }

      // 2.2 处理文本节点更新
      if (patch.type === 'TEXT') {
        dom.textContent = patch.text; // 直接设置文本内容
      }
      
      // 2.3 处理子节点列表更新（简化逻辑，直接清空并重建）
      else if (patch.type === 'CHILDREN') {
        dom.innerHTML = ''; // 清空旧子节点（实际应使用Diff更新子节点）
        patch.children.forEach(child => {
          dom.appendChild(render(child)); // 重新渲染新子节点
        });
      }
      break;
    }
  }
}

关键操作：

节点替换：通过replaceChild实现旧节点删除和新节点插入。
属性操作：setAttribute和removeAttribute精准修改 DOM 属性。
子节点处理：简化版逻辑直接重建子节点（真实场景需结合子节点 Diff 算法，如带 Key 的列表对比）。

六、完整流程示例

1. 初始渲染

// 初始虚拟DOM
const initialVnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [{ tag: 'p', props: {}, children: ['旧文本'] }]
};

// 渲染到页面
const appDom = render(initialVnode);
document.body.appendChild(appDom);

页面效果：显示 <div id="app"><p>旧文本</p></div>。

2. 数据更新后生成新虚拟 DOM

const newVnode = {
  tag: 'div',
  props: { id: 'app', class: 'active' }, // 新增class属性
  children: [{ tag: 'p', props: {}, children: ['新文本'] }] // 文本变更
};

// 对比新旧虚拟DOM
const patch = diff(initialVnode, newVnode);

// 应用补丁更新DOM
patchDOM(appDom, patch);

3. 补丁内容

{
  type: 'UPDATE',
  props: { class: 'active' }, // 新增class属性
  children: [{ tag: 'p', props: {}, children: ['新文本'] }] // 子节点更新
}

4. 最终页面效果

<div id="app" class="active"><p>新文本</p></div>

七、总结：虚拟 DOM 与 Diff 算法的价值

核心价值：通过 “以 JS 计算换 DOM 操作” 的思路，平衡开发效率与运行性能，成为现代前端框架的底层基石。
通过以上内容介绍，可以清晰看到虚拟 DOM 如何通过 JS 对象描述 DOM 结构，Diff 算法如何高效找出差异，以及补丁如何最小化更新真实 DOM。实际框架（如 React/Vue）的实现更复杂，但核心逻辑与此简化版一致。