浏览器的工作原理
前面的过程我们先省略，直接先跳到构建 DOM 树开始吧！
- 构建DOM树
浏览器首先处理 HTML 标记并构造 DOM 树, DOM 树描述了文档的内容。在遇到阻塞资源如<script>之前都会按照顺序进行加载。
- 预加载扫描器
浏览器构建 DOM 树时，这个过程占用了主线程。同时，预加载扫描器会解析可用的内容并请求高优先级的资源。多亏了预加载扫描器，我们不必等到解析器找到对外部资源的引用时才去请求。当主 HTML 解析器扫描到的时候，它们可能已经在下载中了。
- 构建 CSSOM 树
第二步是处理 CSS 并构建 CSSOM 树。CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树。它们是独立的数据结构。构建 CSSOM 非常快，开发人员工具中的“重新计算样式”显示解析 CSS、构建 CSSOM 树和递归计算计算样式所需的总时间。
JavaScript 编译
JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树。要注意 DOM 是可以暴露出去给 JavaScript 修改的，这也是为什么浏览器解析时，遇到<script>会被阻塞。因为如果 DOM 树在脚本中被改变，那么跳过<script>脚本继续解析和构建 DOM 树也毫无意义。
渲染
这里会解释，什么是重绘，什么是重排
- 样式
第三步是将 DOM 和 CSSOM 组合成渲染树。计算样式树从 DOM 树的根开始，遍历每个可见节点，将所有节点和 CSSOM 相关联的样式，通过 CSS 级联确定每个节点的计算样式。
- 布局
在渲染树上运行布局以计算每个节点的几何体。布局是确定呈现树中所有节点的尺寸和位置，以及确定页面上每个对象的大小和位置的过程。重排是后续过程中对页面的任意部分或整个文档的大小和位置的重新计算。
在此阶段，根据视口大小，浏览器将确定屏幕上所有盒子的大小。以视口大小为基础，布局通常从 body 开始，设置所有 body 后代的大小，同时给不知道其尺寸的替换元素（例如图像）提供占位符空间。对于图像，之前没有声明尺寸，一旦知道，就会出现重排。
绘制
关键渲染路径中的最后一步是将各个节点绘制到屏幕上，在绘制或光栅化阶段，浏览器将在布局阶段计算的每个盒子转换为屏幕上的实际像素。绘制涉及将元素的每个可见部分绘制到屏幕上。为了提高绘制和重新绘制的性能，绘制可以将布局树中的元素分解为多个层，将内容提升到 GPU 上的层。
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上。当页面继续加载资源时，可能会发生回流（回想一下我们迟到的示例图像），回流会触发重新绘制和重新合成。比如：当浏览器从服务器获取到图像之后，渲染步骤将返回到布局重新开始。
结论：重排是在浏览器布局过程中，对页面的任意部分或整个文档的大小和位置的重新计算。重绘是在浏览器绘制过程中，加载资源时，发生回流，重新将盒子的实际像素绘制和合成到屏幕上。
