认识
一、认识
真实 DOM, 为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构。 Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟 DOM 目的 就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应。
在 React 中, 通过 Webpack、RsPack 或者 Vite 等构建编译下, 通过显示引入 createElement 或者隐式引入 jsx 将 JSX 语法转换为 ReactElement。ReactElement 就是 React 中的 Virtual DOM。通过 ReactElement 来创建 Fiber。ReactElement 与 Fiber 一一对应。
Real DOM 和 Virtual DOM 的区别? 优缺点？: Real DOM, 是浏览器实际渲染出来的 DOM 树结构，反映了页面真实的节点和状态，操作 Real DOM 会直接触发浏览器的渲染流程, 可能触发频繁重排和重绘, 性能开销大, 操作成本较高，特别是在频繁更新或大量节点的情况下, 而且依赖浏览器特定 API, 无法跨平台。 Real DOM 不需要额外计算，初次渲染速度更快。 Virtual DOM, 是 Real DOM 的 JavaScript 对象表示, 本质是 Real DOM 在内存中的一份轻量级的抽象拷贝, 用来高效地计算差异，并最终映射到 Real DOM。操作JS对象, 性能开销小, 先在内存中批量更新, 再一次性同步到Real DOM, 操作成本低，通过 Diff 算法减少了不必要的 DOM 操作, 可以跨平台。Virtual DOM 初次渲染需要额外的计算和内存, 首次渲染可能略慢, 在某些简单页面或极端优化场景下，反而增加了复杂性。虚拟 DOM 的优势在于通过在内存中快速比较和计算差异，将真实 DOM 更新的代价降到最低
虚拟 DOM 的优势: 虚拟 DOM 的优势在于通过在内存中快速比较和计算差异，将真实 DOM 更新的代价降到最低，从而实现高效的界面更新。虽然在某些极端场景下其 diff 算法也会带来一定开销，但对于大多数复杂应用来说，虚拟 DOM 加上 React 生态中各种优化手段，能够显著提升整体性能和开发体验。
-
虚拟
DOM是纯JavaScript对象的表示，操作它的速度远快于直接操作真实DOM。由于不涉及浏览器的重排（Reflow）和重绘（Repaint），因此可以在内存中高效地进行计算和比较。 -
React使用高效的diff算法对比前后两次的虚拟DOM树，只将发生变化的部分更新到真实DOM。这种 最小差异更新 大大减少了真实DOM操作的次数，从而降低了触发昂贵的排版和重绘的概率。 -
React的更新机制（尤其是Fiber架构）可以将多次更新合并批处理，进一步降低DOM操作的频率。通过合理调度更新任务，可以提升整体用户体验和界面响应速度。
二、问题
2.1 什么是虚拟 DOM?
真实 DOM, 为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构。 Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟 DOM 目的 就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应。
2.2 虚拟DOM 有什么优势?
虚拟 DOM 的优势: 虚拟 DOM 的优势在于通过在内存中快速比较和计算差异，将真实 DOM 更新的代价降到最低，从而实现高效的界面更新。虽然在某些极端场景下其 diff 算法也会带来一定开销，但对于大多数复杂应用来说，虚拟 DOM 加上 React 生态中各种优化手段，能够显著提升整体性能和开发体验。
-
虚拟
DOM是纯JavaScript对象的表示，操作它的速度远快于直接操作真实DOM。由于不涉及浏览器的重排（Reflow）和重绘（Repaint），因此可以在内存中高效地进行计算和比较。 -
React使用高效的diff算法对比前后两次的虚拟DOM树，只将发生变化的部分更新到真实DOM。这种 最小差异更新 大大减少了真实DOM操作的次数，从而降低了触发昂贵的排版和重绘的概率。 -
React的更新机制（尤其是Fiber架构）可以将多次更新合并批处理，进一步降低DOM操作的频率。通过合理调度更新任务，可以提升整体用户体验和界面响应速度。
2.3 虚拟 DOM 真的很快吗 ？
Real DOM 不需要额外计算，初次渲染速度更快。Virtual DOM 初次渲染需要额外的计算和内存, 首次渲染可能略慢, 在某些简单页面或极端优化场景下，反而增加了复杂性。虚拟 DOM 的优势在于通过在内存中快速比较和计算差异，将真实 DOM 更新的代价降到最低
2.4 虚拟DOM 原理是什么? React 如何生成虚拟 DOM?
真实 DOM, 为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实 DOM 结构。 Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。创建虚拟 DOM 目的 就是为了更好将虚拟的节点渲染到页面视图中，虚拟 DOM 对象的节点与真实 DOM 的属性一一照应。
在 React 中, 通过 Webpack、RsPack 或者 Vite 等构建编译下, 通过显示引入 createElement 或者隐式引入 jsx 将 JSX 语法转换为 ReactElement。ReactElement 就是 React 中的 Virtual DOM。通过 ReactElement 来创建 Fiber。ReactElement 与 Fiber 一一对应。
2.5 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
Real DOM 和 Virtual DOM 的区别? 优缺点？: Real DOM, 是浏览器实际渲染出来的 DOM 树结构，反映了页面真实的节点和状态，操作 Real DOM 会直接触发浏览器的渲染流程, 可能触发频繁重排和重绘, 性能开销大, 操作成本较高，特别是在频繁更新或大量节点的情况下, 而且依赖浏览器特定 API, 无法跨平台。 Real DOM 不需要额外计算，初次渲染速度更快。 Virtual DOM, 是 Real DOM 的 JavaScript 对象表示, 本质是 Real DOM 在内存中的一份轻量级的抽象拷贝, 用来高效地计算差异，并最终映射到 Real DOM。操作JS对象, 性能开销小, 先在内存中批量更新, 再一次性同步到Real DOM, 操作成本低，通过 Diff 算法减少了不必要的 DOM 操作, 可以跨平台。Virtual DOM 初次渲染需要额外的计算和内存, 首次渲染可能略慢, 在某些简单页面或极端优化场景下，反而增加了复杂性。虚拟 DOM 的优势在于通过在内存中快速比较和计算差异，将真实 DOM 更新的代价降到最低