浏览器的渲染过程

• 首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
  • 后台预解析且下载涉及到的 CSS 与 JS 文件
  • 遇到 script 标签会先执行 JS 代码，并阻塞 DOM 渲染，可以使用 JS 脚本异步加载 处理
  • 由于 JS DOM 操作 非常耗费性能（比如引起重排），对于大量 DOM 操作，现代框架主要使用 虚拟 DOM（Virtual DOM） 来进行优化
  • DOM 树构建完成 后，会触发 DOMContentLoaded 事件
• 然后对 CSS 进行解析，生成 CSSOM 规则树。
  • 使用 link 可以让浏览器会派发一个新的线程（HTTP 线程）去加载资源文件，与此同时 GUI 渲染线程会继续向下渲染代码
  • 使用 @import 会让GUI渲染线程暂时停止渲染，去服务器加载资源文件，资源文件没有返回之前不会继续渲染(阻碍浏览器渲染)
  • 使用 style
• 对 DOM 和 CSS 的解析，主要影响 FCP 指标
• 根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个渲染对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
• 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
• 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。渲染过程中，由于异步请求，而导致页面布局发送变化，会影响到 CLS 指标