什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路

武天
54 阅读6分钟

虚拟 DOM（Virtual DOM） 是现代前端框架（如 React、Vue）中用于提升性能与开发体验的核心技术。它本质上是​​真实 DOM 的轻量级 JavaScript 对象表示​​，充当着数据与真实界面之间的一个“协调层”。 下面这个表格可以帮助你快速把握它与真实 DOM 的主要区别。

特性维度真实 DOM虚拟 DOM
​​本质​​浏览器提供的、描述页面结构的​​节点树对象​​，属性繁多且复杂内存中用 ​​JavaScript 对象​​模拟的 DOM 节点，只包含关键信息
​​更新性能​​​​直接操作代价高​​，易引发浏览器​​重排与重绘​​，频繁操作易导致性能瓶颈通过 ​​Diff 算法​​计算最小变更，​​批量更新​​真实 DOM，​​减少重排重绘​​
​​开发模式​​​​命令式​​，需手动一步步操作 DOM​​声明式​​，开发者关注数据状态，框架自动处理视图更新
​​跨平台能力​​强依赖浏览器环境​​可跨平台​​，虚拟 DOM 对象可映射到不同原生组件（如 React Native）

💡 为何需要虚拟 DOM

直接操作真实 DOM 之所以缓慢，主要因为每次操作都可能触发浏览器的​​布局计算（重排）和样式重绘​​，这个过程非常消耗性能。在复杂应用中，频繁的数据变化若直接操作 DOM，极易导致页面卡顿。 虚拟 DOM 的出现，就是为了解决这个性能瓶颈。它的核心思路是：​​用 JavaScript 对象模拟 DOM 树，在数据变化时，先在内存中比较新旧虚拟 DOM 树的差异（这个过程非常快），然后只将必需的最小变化批量应用到真实 DOM 上​​，从而最大限度地减少对真实 DOM 的直接、频繁操作。 此外，它也简化了开发模式（声明式编程）并带来了跨平台开发的潜力。

🔄 工作原理

虚拟 DOM 的工作流程可以清晰地分为以下三个核心步骤，下图直观地展示了这一过程：

image.png

flowchart TD
    A[数据变化] --> B[生成新的虚拟DOM树]
    B --> C[Diff算法对比<br>新旧虚拟DOM树]
    C --> D[找出最小差异]
    D --> E[批量更新真实DOM<br>（Patch）]
    E --> F[视图高效更新]

  1. ​​生成虚拟 DOM 树​​：当应用状态（数据）发生变化时，框架会根据新的数据生成一棵新的虚拟 DOM 树（一个 JavaScript 对象树）。这个对象通常包含节点的类型（如 div）、属性（如 id、class）和子节点等信息。

  2. ​​执行 Diff 算法​​：框架会使用 ​​Diff 算法​​ 比较新旧两棵虚拟 DOM 树，找出它们之间的差异。为了优化性能，Diff 算法通常遵循两条核心策略：

    • ​​同层比较​​：只对同一层级的节点进行比较，不跨层级追踪节点的移动。这大大降低了算法复杂度。
    • ​​Key 值优化​​：对于列表渲染，为每个节点提供一个稳定的唯一标识 key，帮助算法更准确地识别节点的增删和移动，避免不必要的重新渲染。

  3. ​​执行 Patch（打补丁）​​：根据 Diff 算法计算出的差异，框架会生成一个​​变更队列​​，然后批量、高效地将这些变更应用到真实 DOM 上。这个过程称为 ​​Patching​​，它确保了只更新必要的部分，而非重新渲染整个界面。

🛠️ 实现一个简易虚拟 DOM

理解原理后，我们可以尝试实现一个极简的虚拟 DOM。以下是一个概念性代码示例，帮助你理解其核心骨架。

  1. ​​定义虚拟节点 (VNode)​​ 首先，我们需要一个构造函数或类来创建代表 DOM 节点的 JavaScript 对象。

    // 定义一个虚拟节点类
class VNode {
  constructor(tagName, props, children) {
    this.tagName = tagName;   // 标签名，如 'div'
    this.props = props || {}; // 属性对象，如 { id: 'app' }
    this.children = children || []; // 子节点数组
  }
}

// 一个辅助函数，方便创建虚拟节点
function createElement(tagName, props, children) {
  return new VNode(tagName, props, children);
}

  2. ​​将虚拟 DOM 渲染为真实 DOM​​ 我们需要一个函数，能将虚拟 DOM 树转换为真实的 DOM 节点并插入到页面中。

    // 将虚拟节点渲染成真实 DOM
function render(vnode) {
  // 如果是文本节点，直接创建文本节点
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  // 1. 根据 tagName 创建真实 DOM 元素
  const element = document.createElement(vnode.tagName);

  // 2. 设置属性
  for (let [key, value] of Object.entries(vnode.props)) {
    element.setAttribute(key, value);
  }

  // 3. 递归渲染并添加子节点
  if (vnode.children) {
    vnode.children.forEach(childVNode => {
      const childElement = render(childVNode); // 递归渲染子节点
      element.appendChild(childElement);
    });
  }

  return element;
}

// 使用示例
const myVNode = createElement('div', { id: 'container' }, [
  createElement('h1', {}, ['Hello, Virtual DOM!']),
  '我是一个文本子节点'
]);

const realDOM = render(myVNode);
document.getElementById('app').appendChild(realDOM);

  3. ​​实现 Diff 与 Patch 函数 (概念性说明)​​ 完整的 Diff 算法非常复杂，这里简述其思路。我们需要一个 diff函数比较两棵树的差异，和一个 patch函数将差异应用到真实 DOM。

    // Diff 函数：对比新旧虚拟节点，返回一个描述差异的“补丁”对象
function diff(oldVNode, newVNode) {
  // 实现差异比较逻辑
  // 例如，检查节点类型是否改变、属性是否变化、子节点如何变化等
  // 返回一个 patches 对象，记录所有需要进行的修改
}

// Patch 函数：将差异补丁应用到真实DOM
function patch(realDOM, patches) {
  // 根据 patches 对象，对真实DOM进行最小化修改
  // 例如，更新属性、添加/删除/移动节点等
}

// 工作流程
const oldTree = createElement('ul', {}, [createElement('li', {}, ['Item 1'])]);
const newTree = createElement('ul', {}, [createElement('li', {}, ['Item 1 Updated'])]);

const patches = diff(oldTree, newTree); // 找出差异
patch(realDOM, patches); // 更新真实DOM

⚖️ 优势与局限

  • ​​优势​​：

    • ​​性能提升​​：通过减少直接且频繁的 DOM 操作，有效避免不必要的重排和重绘，尤其在复杂应用或频繁交互场景下优势明显。
    • ​​声明式开发​​：开发者只需关心数据状态，UI 会根据数据自动更新，简化了开发。
    • ​​跨平台​​：虚拟 DOM 是内存中的 JS 对象，使得同一套框架可用于 Web、移动端（如 React Native）等不同平台。

  • ​​局限​​：

    • ​​内存开销​​：需在内存中维护虚拟 DOM 树，对于非常简单的静态页面，引入虚拟 DOM 可能反而增加开销。
    • ​​Diff 计算成本​​：复杂视图的 Diff 比较本身有计算成本，尽管算法已优化。
    • ​​不适用于极致性能场景​​：对性能有极端要求的动画或游戏，直接操作 DOM 可能更优。

希望这些解释和示例能帮助你透彻地理解虚拟 DOM。如果你对特定框架（如 Vue 或 React）中的具体实现细节或优化策略感兴趣，我们可以继续深入探讨。

avatar
文章
阅读
粉丝