《浏览器原理》学习笔记Day61

虚拟DOM：虚拟DOM和实际的DOM有何不同？

DOM 的缺陷

通过JS调用API操作DOM，会影响到整个渲染流水线。所以对于DOM的不当操作可能引发强制同 步和布局抖动，大大降低渲染效率。
对于简单的页面来说，其 DOM 结构还是比较简单的，所以以上这些操作 DOM 的问题并不会对用户体验产生太多影响。但是对于页面非常多或是单页面来说，其DOM结构是很复杂的，执行一次重排或是重绘是非常耗时的。

什么是虚拟 DOM

将页面改变的内容应用到虚拟 DOM 上，而不是直接应用到 DOM 上。
变化被应用到虚拟 DOM 上时，虚拟 DOM 并不急着去渲染页面，而仅仅是调整虚拟 DOM 的内部状态，这样操作虚拟 DOM 的代价就变得非常轻了。
在虚拟 DOM 收集到足够的改变时，再把这些变化一次性应用到真实的 DOM 上。

• 创建阶段。首先依据 JSX 和基础数据创建出来虚拟 DOM，它反映了真实的 DOM 树的结构。然后由虚拟 DOM 树创建出真实 DOM 树，真实的 DOM 树生成完后，再触发渲染流水线往屏幕输出页面。
• 更新阶段。如果数据发生了改变，那么就需要根据新的数据创建一个新的虚拟 DOM 树；然后 React 比较两个树，找出变化的地方，并把变化的地方一次性更新到真实的 DOM 树上；最后渲染引擎更新渲染流水线，并生成新的页面。

1. 双缓存
   从双缓存角度理解虚拟DOM。可以把虚拟 DOM 看成是 DOM 的一个 buffer。
2. MVC
   模式MVC 是一个非常重要且应用广泛的模式，因为它能将数据和视图进行分离，在涉及到一些复杂的项目时，能够大大减轻项目的耦合度，使得程序易于维护。
   参考下图：

MVC 的整体结构比较简单，由模型、视图和控制器组成，其核心思想就是将数据和视图分离，也就是说视图和模型之间是不允许直接通信的，它们之间的通信都是通过控制器来完成的。
基于 MVC 又能衍生出很多其他的模式，如 MVP、MVVM 等。

所以在分析基于 React 或者 Vue 这些前端框架时，我们需要先重点把握大的 MVC 骨架结构，然后再重点查看通信方式和控制器的具体实现方式。在分析React项目时，就可以把React看作是一个MVC中的视图，再结合Redux就可以构建一个MVC模型：

• 图中的控制器是用来监控 DOM 的变化，一旦 DOM 发生变化，控制器便会通知模型，让其更新数据；
• 模型数据更新好之后，控制器会通知视图，告诉它模型的数据发生了变化；
• 视图接收到更新消息之后，会根据模型所提供的数据来生成新的虚拟 DOM；
• 新的虚拟 DOM 生成好之后，就需要与之前的虚拟 DOM 进行比较，找出变化的节点；
• 比较出变化的节点之后，React 将变化的虚拟节点应用到 DOM 上，这样就会触发 DOM 节点的更新；
• DOM 节点的变化又会触发后续一系列渲染流水线的变化，从而实现页面的更新。

此文章为4月Day22学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪