什么是虚拟 DOM？

约 1171 字大约 4 分钟

2025-03-15

一、概念

虚拟 DOM（Virtual DOM）是一种用于优化 Web 应用性能的技术。它是一个轻量级的 JavaScript 对象，用来描述真实 DOM 的结构和状态。虚拟 DOM 并不是直接操作浏览器的 DOM，而是通过对比新旧虚拟 DOM 的差异，计算出最小的更新操作，再将这些操作应用到真实 DOM 上。

二、核心原理

1. 在内存中维护一个虚拟 DOM 结构

虚拟 DOM 是一个轻量级的 JavaScript 对象树，用于描述真实 DOM 的结构。每个节点包含标签名（tag）、属性（props）、子节点（children）等信息，例如：

// Vue中的VNode示例
{
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'p', props: {}, children: ['节点内容'] }
  ]
}

2. 通过 Diff 算法对比新旧虚拟 DOM 的差异

当数据变化时，生成新的虚拟 DOM 树，并与旧树进行对比。Diff 算法通过以下策略优化比较过程：

同层比较：仅对比同一层级的节点，避免跨层级遍历，复杂度从 O(n³)降至 O(n)。
Key 优化：为列表项添加唯一key，帮助算法识别节点移动或复用，减少不必要的 DOM 操作。
差异类型标记：记录节点的替换（REPLACE）、属性修改（PROPS）、文本修改（TEXT）、子节点顺序调整（REORDER）等差异。

3. 批量更新真实 DOM

根据 Diff 结果生成“补丁”（Patches），仅对真实 DOM 中变化的部分进行更新，而非全量渲染，从而减少性能损耗。

三、工作流程

1、构建虚拟 DOM 树

通过 JavaScript 对象模拟 DOM 结构。例如，React 使用 JSX 语法，Vue 通过h()函数生成虚拟节点（VNode）311。

// Snabbdom创建VNode示例:cite[5]
const vnode = h("div#container", { style: { color: "red" } }, [
  h("h1", "Hello Virtual DOM"),
]);

2、渲染初始 DOM

将虚拟 DOM 树转换为真实 DOM 并插入页面：

const rootNode = vnode.render(); // 递归生成真实DOM节点
document.body.appendChild(rootNode); // 插入页面:cite[10]

3、数据变化触发更新

当状态变化时，生成新的虚拟 DOM 树，并与旧树进行 Diff 比较：

const newVNode = h('div#container', { style: { color: 'blue' } }, [...]); // 新树
const patches = diff(oldVNode, newVNode); // 计算差异:cite[8]

4、应用差异（Patch 阶段）

根据差异记录更新真实 DOM：

patch(oldVNode, patches); // 仅更新变化的部分:cite[5]:cite[10]

替换节点：直接替换旧节点。
修改属性：更新 DOM 元素的class、style等。
调整子节点顺序：通过插入、删除或移动操作优化渲染。

四、优缺点

1、优点

性能优化
- 减少直接 DOM 操作次数，避免频繁重排/重绘。
- 批量更新机制，合并多次数据变更，提升渲染效率。2
跨平台能力
- 虚拟 DOM 抽象了渲染逻辑，可适配不同平台（如浏览器、移动端、小程序），实现“一次编写，多端运行”。
开发体验提升
- 数据驱动视图，开发者无需手动操作 DOM。
- 框架（如 React、Vue）封装 Diff 和 Patch 过程，简化复杂度。

2、缺点：

额外内存消耗：
- 虚拟 DOM 需要在内存中维护一份额外的 JavaScript 对象表示，它与真实 DOM 所占用的内存相比可能会有额外的开销。但通常情况下，这些开销在现代浏览器中并不是主要问题，可以被接受。
学习曲线
1. 虚拟 DOM 的概念和使用过程需要一定的学习和理解成本。
2. 开发人员需要了解虚拟 DOM 的工作原理，并学习如何使用虚拟 DOM API 或框架提供的相关工具来创建和更新虚拟 DOM。
某些场景下不必要：
1. 对于简单静态页面或只有少量交互的应用程序，虚拟 DOM 可能会显得过于复杂，不值得引入。
2. 在这些情况下，直接操作原生 DOM 可能更简单高效。