什么是虚拟 DOM？如何实现一个简单的虚拟 DOM？

虚拟 DOM（Virtual DOM）是一个轻量级的 JavaScript 对象模型，用于模拟真实 DOM 的结构。它在内存中维护 UI 的虚拟表示，通过 Diff 算法比对数据变化前后两次的虚拟 DOM 差异，最小化直接操作真实 DOM 的开销。虚拟 DOM 的核心价值在于提升渲染性能（如减少重排重绘）和简化开发复杂度。

虚拟 DOM 的工作流程

1. 构建虚拟 DOM 树
   将真实 DOM 转化为 JS 对象树，模拟节点属性（标签名、属性、子节点）。示例结构：

   const vnode = {
     tag: 'div',
     props: { id: 'container' },
     children: [
       { tag: 'p', text: 'Hello World' }
     ]
   };
   

2. 更新时生成新虚拟 DOM 树
   当数据变化时，重新生成一个新的虚拟 DOM 树。

3. Diff 算法比对差异
   • 采用「同层级比较」策略（减少复杂度）。
   • 设置四个指针遍历新旧树的子节点（旧头、旧尾、新头、新尾），匹配 key 相同的节点。
   • 主要处理五种场景（以 React 为例）：
     1. 新旧头节点相同 → 直接复用节点
     2. 新旧尾节点相同 → 直接复用
     3. 新尾节点对比旧头节点 → 移动节点
     4. 新头节点对比旧尾节点 → 移动节点
     5. 乱序时按新树顺序重建或复用带 key 的节点。
4. 生成并应用差异补丁（Patch）
   将 Diff 结果转化为操作队列，批量更新到真实 DOM：

   // 伪代码示例：将差异应用到真实 DOM
   function applyPatches(realNode, patches) {
     patches.forEach(patch => {
       if (patch.type === 'REPLACE') realNode.parentNode.replaceChild(createElement(patch.newNode), realNode);
       if (patch.type === 'UPDATE') updateAttributes(realNode, patch.attributes);
     });
   }
   

实现关键步骤

1. 定义 VNode 结构
   封装虚拟节点的数据结构：

   class VNode {
     constructor(tag, props, children, text, key) {
       this.tag = tag;
       this.props = props || {};
       this.children = children || [];
       this.text = text;
       this.key = key; // 用于 Diff 优化
     }
   }
   

2. 构建 Diff 算法
   • 实现递归或迭代的同层级节点比对函数。
   • 对带 key 的节点优先匹配（避免频繁重建）。
3. 渲染到真实 DOM
   转换虚拟节点为真实元素：

   function createElement(vnode) {
     const el = document.createElement(vnode.tag);
     // 设置属性（如 class、id）
     Object.keys(vnode.props).forEach(prop => el.setAttribute(prop, vnode.props[prop]));
     // 递归处理子节点
     vnode.children.forEach(child => el.appendChild(createElement(child)));
     return el;
   }
   

性能优化核心机制

• 批量更新：减少多次操作 DOM 导致的渲染开销（如 1000 次更新合并为一次）。
• 惰性更新：仅修改差异部分，未变更的节点跳过操作（示例性能对比：虚拟 DOM 比直接操作 DOM 提速 82%，内存占用降低 52%）。

注意事项：避免深层嵌套的虚拟 DOM 树（影响 Diff 效率），推荐组件扁平化设计。