前端面试 P072：虚拟 DOM 的价值与性能边界

来源：方格前端讲面试 · 2.虚拟DOM是什么？它解决了哪些实际问题？，13 分 43 秒。

回看定位：01:01 性能背景 · 06:33 协调 · 10:42 跨平台

描述、协调与提交

虚拟 DOM 是对 UI 结构的内存描述这一类思想。React 根据输入计算元素与 Fiber 等运行时结构，协调需要更新的部分，再通过具体渲染器提交。React 元素、Fiber 和浏览器 DOM 不是同一个对象。

它解决哪些实际问题

让开发者描述结果，框架集中处理更新、复用、调度与跨渲染目标的连接。React DOM 与 React Native 可以复用部分组件思想和逻辑，但平台组件、交互和样式并不保证同一份网页 JSX 原样通用。

必须修正两个性能推论

DOM 修改不等于每次立刻同步布局和绘制。 浏览器会根据条件延迟、合并工作；交错写入与读取布局等操作可能造成强制同步布局。课程用每次 append 都必然引发一次大规模回流的方式解释，过于简单。

协调不保证全局最小编辑集，也不保证总比直接 DOM 快。 虚拟结构创建和比较也有成本；框架采用高效启发式与约定，手写准确的局部 DOM 更新可能更少。不能用“普通 JS 对象一定快”推出整条渲染路径无成本。

面试回答结构

先说明 UI 描述与真实节点的区别，再讲重算、匹配和提交，最后说明开发模型、复用与调度收益。性能应结合应用而非绝对比较；不要只拿每次清空整个 innerHTML 的低效实现与框架比较。

关联：前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别、前端面试 P076：Fiber 的协作调度与不可中断边界。