• 对虚拟 DOM 的理解？
• 为什么虚拟 DOM 能够提高性能？

理解

虚拟 DOM 为两个前端流行框架 Vue、 React 都带来了跨平台的能力。

实际上，虚拟 DOM 是对真实 DOM 的一个抽象，以 JavaScript 对象（VNode 节点）作为基础树，用对象的属性来描述节点，最终可以通过一系列的操作使这棵树映射到真实的环境中。这个 JavaScript 对象（Object 对象）包含 标签名 tag 、属性 attrs 、子元素对象 children 是那个属性，不同框架对这三个属性的命名可能会有差别。

创建虚拟 DOM 为了更好的将虚拟的节点渲染到页面视图中，所以虚拟 DOM 对象的节点与真实 DOM 的属性一一对应。

由于真实 DOM 的体量十分庞大，大多数的性能问题都是 DOM 操作带来的。真实的 DOM 节点哪怕是一个简单的 div 也包含很多属性。所以操作真实 DOM 的会带来昂贵的代价。

而通过虚拟 DOM（VNode），会通过 diff 算法计算出真正需要更新的节点，最大限度减少对真实 DOM 的操作，保存到本地的 JavaScript 对象中，将这个 JavaScript 对象一次性绑定到 DOM 树上，从而避免大量的无用计算，显著提高性能。

虚拟 DOM 的优势不在于单次操作，而是在于大量、频繁的数据更新至下啊，能够对视图进行合理、高效的更新。

使用 diff 算法

diff（different），顾名思义，在构建 DOM 的过程中，会由 diff 过程就是比对计算 DOM 变动的地方，核心是由 patch 算法将变动映射到真实 DOM 上，所以视图的创建更新流程就是下面这样

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较 (diff 过程)，记录两棵树差异
3. 把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上 (patch)，视图就更新了

参考

• JS 基础系列之 —— 虚拟 DOM - 知乎 (zhihu.com) (opens new window)
• 如何实现虚拟 DOM 参考：面试官：什么是虚拟 DOM？如何实现一个虚拟 DOM？说说你的思路 | web 前端面试 - 面试官系列 (vue3js.cn) (opens new window)