浏览器渲染原理

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传给渲染主线程的消息队列。在时间循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画。

渲染进程中包含：渲染主线程和合成线程。

1. HTML 解析（Parse）

解析 HTML 字符串产生两棵树（对象结构）：DOM Tree 和 CSSOM Tree。

解析过程中遇到CSS代码怎么办？

为了提高解析效率，浏览器会启动一个预解析线程先下载和解析CSS。

例如：当遇到 link 标签引用的CSS文件时，预解析线程会把CSS资源链接交给网络线程下载文件，下载完成后把CSS内容交给预解析线程解析CSS，解析完成后再交给渲染主线程最后生成CSSOM Tree。

因下载和解析CSS的工作是在预解析线程中进行的，因此CSS不会阻塞HTML解析。

解析过程中遇到JS代码怎么办？

预解析线程可以分担一点下载JS的任务，解析HTML时发现JS文件在下载中，这时会暂停解析HTML，等待JS下载完成，下载完成后执行JS代码，然后继续解析HTML。

JS阻塞HTML解析过程原因是：JS代码执行过程中有可能更改已经解析过的HTML。

如果是带有 defer 或 async 属性的 script 标签则规则略有不同，带有async属性的脚本在下载JS时不会阻塞解析HTML，一旦下载完成，渲染线程会暂停解析HTML，转而执行JS代码；而带有defer属性的脚本在下载时也不会阻塞解析HTML，在文档被解析后，但在触发 DOMContentLoaded 事件之前（会阻塞该事件的触发）执行该脚本。

2. 样式计算（Style）

CSS 属性值的计算过程发生在这一步。 比如层叠、继承。许多预设值会变成绝对值，比如red变成rgb(255,0,0)；相对单位变成绝对单位，比如em变成px。

遍历DOM Tree和CSSOM Tree，计算出每个节点的最终样式（Computed Style）。

3. 布局（Layout）

根据上一步计算好的样式算出每个节点的尺寸和位置，生成Layout Tree。比如margin的合并、BFC规则、浮动规则等。计算出的位置和尺寸的值相对于 包含块。

DOM树和Layout树不一定是一一对应的，比如：

• DOM 树中存在display:none;的节点，而Layout Tree中会去除这样的节点；
• DOM 树中不存在伪元素（如::before），而在Layout Tre中会被解析为一个节点；
• 内容必须在行盒中，行盒和块盒不能相邻；

4. 分层（Layer）

对布局树进行分层的好处在于，将来某一层改变后，仅会对该层进行后续处理，从而提示效率。

滚动条、堆叠上下文、transform、opacity等样式都会或多或少影响分层效果，也可以通过will-change属性更大程度的影响分层结果。

5. 绘制（Paint）

主线程会为每个层单独绘制指令集，用于描述这一层的内容如何画出来。

6. 分块（Tiling）

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程（是在渲染主进程中）完成。

合成线程首先对每个图层进行分块，将其划分为更多的小区域。会从线程池中拿出多个线程来完成分块工作。

7. 光栅化（Raster）

合成线程会将分块信息交给GPU进程，以极高的速度完成光栅化。

GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

光栅化的结果就是一块快的位图。

8. 画（Draw）

合成线程拿到每个层、每个块的位图后，生成一个个的quad信息，然后把这些信息交给GPU进程，由GPU进程产生系统调用，交给GPU硬件处理，完成最终的屏幕成像。

quad信息会标识出每个位图应该画到屏幕哪个位置，以及会考虑旋转、缩放等变形。

变形发生在合成线程，与渲染主线程无关，这就是transform属性效率高的本质原因。

回流（Reflow）

比如更改了CSS尺寸或者位置，这时会触发第二步即样式计算，然后触发重新布局、分层等后续操作。

为了避免连续多次操作导致布局树反复计算，浏览器会合并这些操作。当JS代码全部完成后再进行统一计算。

但在JS中获取几何信息的属性（如clientWidth）时会立即reflow。

重绘（Repaint）

比如改动了背景颜色、字体颜色与几何信息无关的样式，repaint的本质是重新根据分层信息计算了绘制指令。

Layout 甚至 Layer步骤会被跳过。

Reflow 一定会导致 Repaint

为什么 transform 的效率高

因为 transform 既不影响布局也不影响绘制指令，它影响的只是渲染流程的最后一个 Draw 阶段。

由于 Draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。