请阐述虚拟 DOM 与真实 DOM 之间的差异，并分别指出两者的优势与不足。
考察说明
考察对 DOM 概念的理解以及虚拟 DOM 设计动机的掌握。
回答思路
- 【回答框架 1】真实 DOM 是浏览器提供的结构化表示，用于描述页面元素及其属性、内容，操作它直接触发布局、绘制等重流程。虚拟 DOM 是真实 DOM 的轻量级 JavaScript 对象映射，通过对比新旧虚拟 DOM 的差异，最小化真实 DOM 操作。
- 【回答框架 2】虚拟 DOM 的优点：提升开发效率，通过声明式 UI 简化操作；在频繁更新场景下，通过 diff 算法减少直接操作真实 DOM 的次数，从而降低性能开销；跨平台，可应用于非浏览器环境如 React Native。缺点：引入额外内存和计算开销；首次渲染可能比直接操作 DOM 更慢；在极简单或静态页面中优势不明显。
- 【回答框架 3】真实 DOM 的优点：性能高，因为无中间层；直接控制底层操作，灵活性高；适合简单应用或性能要求极高的场景。缺点：操作成本高，每次修改可能引起重排或重绘；手动管理状态和 DOM 同步易出错；跨平台复用性差。
- 【回答框架 4】应用场景：在大型动态应用中，虚拟 DOM 能保证可维护性和性能平衡；在小型静态页面或极致性能场景下，真实 DOM 可能更合适。现代框架已通过优化（如 React 的 fiber）进一步减少成本，但本质仍是权衡。
- 【关键点 1】真实 DOM 直接对应浏览器渲染树，操作开销大。
- 【关键点 2】虚拟 DOM 通过 diff 算法减少真实 DOM 操作次数。
- 【关键点 3】虚拟 DOM 提升开发效率和跨平台能力，但增加内存与计算。
- 【关键点 4】真实 DOM 在简单场景下性能最优。
- 【关键点 5】选择取决于应用复杂度与性能需求。
- 【易错点 1】错误认为虚拟 DOM 总是比真实 DOM 快，实际首次渲染可能更慢。
- 【易错点 2】忽略 diff 算法本身的复杂度，极大规模更新仍需优化。
- 【易错点 3】将虚拟 DOM 与 React 强绑定，实际 Vue 等也使用类似概念。