虚拟 DOM

定义

虚拟 DOM(Virtual DOM)是一种用于高效更新用户界面的技术。它在内存中以轻量的 JavaScript 对象树来描述界面的结构,作为真实 DOM 的抽象映射;当界面状态变化时,框架先在这一虚拟表示上计算差异,再将必要的最小变更应用到真实 DOM,从而减少代价高昂的直接 DOM 操作。[1]

原理

当组件状态更新时,框架会重新生成一棵新的虚拟 DOM 树,并将其与上一次的虚拟 DOM 树进行比对,这一过程称为协调(reconciliation)或 diff。比对算法识别出两棵树之间发生变化的节点,计算出一组最小化的更新操作,再批量地将这些操作施加到真实 DOM 上。由于真实 DOM 的读写远比内存中的对象操作昂贵,通过先在虚拟层比对、再精确更新,可以在多数场景下提升更新效率,同时让开发者以声明式方式编写界面。

特点

优点在于:开发者只需描述界面应是什么样,无需手动操作 DOM,框架自动完成高效更新;跨平台渲染也更易实现。其权衡在于:虚拟 DOM 的创建与 diff 本身存在计算与内存开销,并非在所有场景下都优于直接更新;对极致性能场景,基于编译期分析的细粒度更新方案可能更高效。

应用

虚拟 DOM 由 React 推广,Vue 等框架亦采用类似机制。与之相对,Svelte、Solid 等选择无虚拟 DOM 的编译期或细粒度响应式路线,直接生成精确的 DOM 更新代码,体现了界面更新策略上的不同技术取向。