17370845950

虚拟 DOM 是用 JS 对象模拟真实 DOM 的轻量级抽象，通过 diff 算法比对新旧树、最小化更新并批量同步到真实 DOM，从而减少重排重绘；它并非天生更快，而是以可控 JS 计算换更少更准的 DOM 操作。

虚拟 DOM 是 JavaScript 中用普通对象模拟真实 DOM 结构的一种轻量级抽象。它本身不是浏览器 API，而是一个由框架（如 React、Vue）维护的内存中树状数据结构，用来描述页面应有的 UI 状态。

虚拟 DOM 是怎么工作的？

当组件状态变化时，框架会生成一棵新的虚拟 DOM 树，然后和上一次的旧树进行对比（这个过程叫 diff），只找出真正发生变化的节点。接着，框架把差异批量映射到真实 DOM 上，避免频繁、零散的 DOM 操作。

• 真实 DOM 操作代价高：每次增删改都会触发重排（reflow）和重绘（repaint）
• 虚拟 DOM 把“操作 DOM”变成“操作 JS 对象”，速度快几个数量级
• diff 算法有优化策略（比如只比对同层节点、用 key 标识列表项），不逐像素比较整棵树

它为什么能提升性能？

关键不在于“虚拟 DOM 本身快”，而在于它让框架有能力做 最小化更新 和 批量更新。

• 避免直接调用 document.createElement、appendChild 等原生 API（这些会同步影响渲染流水线）
• 把多次状态更新合并成一次 DOM 提交，减少重排重绘次数
• 配合异步渲染（如 React 的 Concurrent Mode），还能中断低优先级更新，提升响应性

注意：虚拟 DOM 不是银弹

它适合中大型、交互频繁的应用；对于静态页面或简单动态内容，直接操作 DOM 可能更轻量、更直观。

• 虚拟 DOM 带来额外内存开销（存两棵 JS 树）和 diff 计算成本
• 过度嵌套或未合理使用 key 会导致 diff 失效，反而降低性能
• 有些场景（如 Canvas、WebGL 渲染）完全绕过 DOM，虚拟 DOM 就不适用

基本上就这些。它不是黑科技，而是一种权衡——用可控的 JS 计算换更少、更准的真实 DOM 操作。