JavaScript真实DOM和虚拟DOM（超详细）

定义：

真实 DOM：网页加载时，浏览器解析 HTML 代码生成真实DOM，每个真实 DOM 都有对应的 JavaScript 对象表示。

虚拟 DOM：虚拟 DOM 基于 MVC模型，使视图和模型分离，是一个用 JavaScript 对象来表示真实 DOM 的轻量级副本。Vue和React 使用虚拟 DOM 来提高页面渲染性能。当数据发生变化时，Vue 首先会基于新数据生成新的虚拟 DOM 树，然后通过 diff 算法比较新旧虚拟 DOM 树的差异，并将差异部分应用到真实 DOM 上，从而实现局部更新而非整体更新

虚拟 DOM 的优点：

1. 性能优化：通过使用虚拟 DOM，Vue 可以避免直接操作大量真实 DOM 所带来的性能开销。通过比较虚拟 DOM 的差异，Vue 只会更新需要更新的部分，尽可能减少对真实 DOM 的操作次数。
2. 跨平台支持：虚拟 DOM 不仅可以用于浏览器环境中，还可以在其他环境中，如服务器端渲染（SSR）中使用。这使得 Vue 可以在不同的平台上复用代码，提高开发效率。
3. 更方便的抽象层次：虚拟 DOM 提供了一种更高级别的抽象来描述和操作 DOM，使开发者能够以声明式的方式编写界面逻辑，而不必直接与低级的真实 DOM API 打交道。

真实DOM的缺点：

DOM节点的操作是会影响到《页面渲染》的。并且对DOM节点的增删改查会直接触发样式计算、布局、绘制、栅格化、合成等任务，会引起回流/重绘，回流和重绘是非常消耗资源的，也非常费时间 。

MVC模型：

基本思想是视图与模型分离，视图与模型是不能直接通信的，只能通过控制器来完成。基础MVC的思想再衍生出MVVM模型，MVC具体的实现流程如下：

diff算法：

用于比较两个虚拟 DOM 树之间差异的一种算法。最小化对真实 DOM 的操作。

1. 比较根节点：首先比较新旧虚拟 DOM 树的根节点，检查它们的类型是否相同，如果类型不同，则直接替换整个节点。
2. 比较子节点列表：接下来，比较新旧虚拟 DOM 树的子节点列表。这个过程是一个递归的过程，对于每个子节点，都会执行以下操作：

• 比较节点类型：检查新旧节点的类型是否相同，如果不同，则直接替换整个节点。
• 比较节点属性：比较新旧节点的属性列表，更新发生变化的属性。
• 比较子节点：递归地对子节点进行上述操作，找出子节点之间的差异。

1. 对比完成后，得到了一份描述差异的数据结构，通常称为补丁（Patch）。补丁记录了对应于旧虚拟 DOM 树中的节点的操作，包括插入、删除、更新等。
2. 根据补丁的操作指令，将这些操作应用到真实 DOM 树上，以完成对页面的实际更新。

diff 算法的核心思想是在进行比较时尽可能找出差异最小的部分，局部更新，避免整体更新，从而提高更新效率。虚拟 DOM 库通常会优化 diff 算法的实现，采用一些策略来进一步减少比较的复杂性和提高性能，如设置唯一标识 key