JavaScript实现虚拟DOM及diff算法解析

虚拟DOM是用JavaScript对象轻量模拟真实DOM的抽象层，核心价值在于避免频繁操作真实DOM引发的性能瓶颈，支持批量更新与跨平台渲染；其背后依赖的diff算法并非“智能移动”节点，而是严格限定在同层级、同类型的节点间进行高效比对，通过key精准标识可复用节点以保留状态，尤其强调列表渲染中必须使用稳定唯一的key而非index；整个流程分为diff（计算变更）和commit（执行真实DOM更新）两个阶段，理解这一机制不仅能揭开React、Vue等框架的更新奥秘，更能帮助开发者写出真正高性能、可预测的前端代码。

虚拟 DOM 是什么，为什么需要它

虚拟 DOM 不是浏览器原生概念，而是用 JavaScript 对象模拟真实 DOM 节点的结构。它本身不渲染、不响应事件，只是一层轻量的数据描述。核心价值在于：避免直接操作真实 DOM 带来的频繁重排重绘开销；为批量更新和跨平台（如 SSR、小程序）提供中间抽象层。

关键点：React.createElement 返回的就是一个虚拟 DOM 对象（Plain Object），形如 { type: 'div', props: { className: 'box' }, children: [...] }。Vue 的 h()、Preact 的 h 函数同理。

diff 算法只在同层级比较，且默认不跨类型移动节点

主流实现（React 16+、Vue 3）采用「双端对比 + 最小编辑距离启发式」，但前提是：diff 严格限制在相同 type（标签名或组件类型）的节点之间进行。一旦 type 改变（比如 div → span），整棵子树被丢弃重建，不会尝试复用。

常见误解：以为 diff 会智能“移动”节点。实际上，key 的作用只是告诉算法：“这个节点在旧列表里叫 A，在新列表里还叫 A，可以复用其状态（如 input 光标、组件实例）”。没有 key 或 key 错乱，会导致无谓的销毁重建。

• 列表渲染必须用稳定唯一的 key，禁止用 index
• props 变化时，仅触发 shouldComponentUpdate 或 memo 判断，不等于跳过 diff
• 函数组件每次 render 都生成新虚拟 DOM 树，diff 发生在新旧两棵树之间

简化版 diff 过程：从根节点开始递归比对

真实框架逻辑复杂，但主干流程可概括为三步：① 比较节点类型；② 若类型相同，更新 props 和事件；③ 递归比对子节点（children）。子节点 diff 分为单节点和多节点两种路径：

单节点（如 div 下只有一个 p）：直接递归比对子节点对象。

多节点（如 ul 下有多个 li）：进入列表 diff，此时才用到 key。算法会先快速比对头尾四组（oldStart/newStart、oldEnd/newEnd、oldStart/newEnd、oldEnd/newStart），找到可复用项，再 fallback 到哈希映射查找。

function diff(oldNode, newNode, parentDOM) {
  if (!newNode) {
    parentDOM.removeChild(oldNode.el);
  } else if (!oldNode) {
    const el = createElement(newNode);
    parentDOM.appendChild(el);
  } else if (oldNode.type !== newNode.type) {
    // 类型不同，直接替换
    const el = createElement(newNode);
    parentDOM.replaceChild(el, oldNode.el);
  } else {
    // 类型相同，复用 DOM 节点，只更新 props & children
    updateElement(oldNode.el, oldNode.props, newNode.props);
    diffChildren(oldNode.children, newNode.children, oldNode.el);
  }
}

diff 不等于 patch，真实 DOM 更新发生在 commit 阶段

diff 只是计算出「需要做什么」（如「删除第 2 个子节点」「将第 1 个子节点的 className 改为 'active'」），这些操作被收集为 effect list。真正的 DOM 修改（patch）是在 commit 阶段统一执行的，且不可中断——这也是 React 18 并发模式要解决的问题之一。

容易忽略的细节：useEffect、useLayoutEffect 的执行时机就卡在 commit 后的不同阶段；服务端渲染（SSR）时，diff 在 Node.js 环境运行，没有真实 DOM，所以必须靠 hydrateRoot 在客户端做水合校验。

以上就是《JavaScript实现虚拟DOM及diff算法解析》的详细内容，更多关于的资料请关注golang学习网公众号！