## 什么是渲染(render)? 浏览器中的“渲染”指的是将`HTML`字符串转化为屏幕上的像素信息的过程。
我们可以将渲染想象成一个`render`函数，函数接收一个`html`字符串，将其经过一系列处理得出若干像素点的颜色，将这些像素信息存在`pixels`变量中返回。 ```js function render(html) { // 一系列处理得出像素信息... return pixels; } ``` ## 渲染时间点了解什么是渲染之后，我们不由得好奇发问：渲染是在什么时候发生的呢？当我们在浏览器键入一个`URL`时，网络线程会通过网络通信拿到`HTML`，但网络线程自身并不会处理`HTML`(人家是专注于搞网络的)，它会将其生成一个渲染任务交给消息队列，在合适的时机渲染主线程会从消息队列中取出渲染任务执行，启动**渲染的流程**。

`Tip`：关于渲染主线程是如何工作的，不了解的朋友可以去看一下我的这篇文章：
[# 从「浏览器的进程模型」到「事件循环」](https://juejin.cn/post/7261631406581022775)
## 渲染流水线接下来我们重点来讲解**渲染的流程**，整个过程如下图：

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。这样，整个渲染流程就形成了一套组织严密的生产流水线。 ## 1. 解析HTML 渲染的第一步是**解析 HTML**。

由于字符串难以进行操作，浏览器首先会将`HTML`字符串解析成`DOM`树和`CSSOM`树这种容易操作的对象结构，也提供了`js`操作这两颗树的能力。
- `document`就是`DOM`树的根节点，`body`是根节点的子节点，只要拿到根节点就可以拿到网页的所有节点。
- `StyleSheetList`就是`CSSOM`树（CSS OBject Model）的根节点，代表网页中所有的层叠样式表。
**层叠样式表有哪些？** ```js // 内部样式表 // 外部样式表

// 内联样式表或行内样式表 // 浏览器默认样式表 ``` 每一个层叠样式表都是根节点的子节点，每个样式表中有很多`CSS`规则，这些规则会形成很多规则对象，作为样式表的子节点。规则中会有很多选择器(例如：`body h1`)和样式(例如：`color:red`)，作为规则对象的子节点，每个样式又有多个键值对作为子节点...如此层层嵌套。
除了浏览器的默认样式外，其他的样式`js`都能操作。
**除了最常见的 `dom.style = xxx` 的方式以外，你还知道其他操作样式的方法吗？**
通过`document.styleSheets`可以拿到除了内联和默认样式表之外的**所有内部和外部样式表**。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd5490213d56470693f874c9f4c6a35d~tplv-k3u1fbpfcp-watermark.image?) 通过`addRule`API给所有的`div`加上红色边框。

#### HTML 解析过程遇到CSS和JS怎么办？为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的 JS 文件。如果主线程解析到`link`位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到`script`位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。 ## 2. 样式计算渲染的下一步是**样式计算**。经过HTML解析过后，我们拿到了`DOM`树和`CSSOM`树，但是光得到这两颗树还不够，还需要知道每个DOM对应哪些样式。主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 `Computed Style`。在这一过程中，很多预设值会变成绝对值，比如`red`会变成`rgb(255,0,0)`；相对单位会变成绝对单位，比如`em`会变成`px` 这一步完成后，会得到一棵带有样式的 DOM 树。

`Tip`：不了解CSS计算过程的同学，可以看一看这篇文章 [# 你是否了解 CSS 的属性计算过程呢？](https://juejin.cn/post/7262189386804609079) ## 3. 布局接下来是**布局**，布局完成后会得到布局树。

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。大部分时候，DOM 树和布局树并非一一对应。比如`display:none`的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。

布局树的每一个节点不是DOM对象，而是`C++`对象。 ## 4. 分层下一步是**分层**。

主线程会使用一套复杂的策略对整个布局树中进行分层。分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过`will-change`属性更大程度的影响分层结果。可以在开发者工具中查看图层： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b407494aa6004e3483221c817010a38d~tplv-k3u1fbpfcp-watermark.image?) 还可以旋转、放大，帮助我们更清晰地查看图层。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92f0411e2b55483582d1573ad832f3a4~tplv-k3u1fbpfcp-watermark.image?) ## 5. 绘制再下一步是**绘制**。

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。 > 什么是绘制指令集？ > > 类似于： > > 将笔移动到（10，30）的位置 > 画一个 20 * 30 的矩形 > 将矩形填充为红色 > ... 绘制完成后，渲染主线程的工作到此为止，**剩余步骤交给其他线程来完成**。 ## 6. 分块完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由**合成线程**完成。合成线程首先对每个图层进行**分块**，将其划分为更多的小区域。它会从线程池中拿取多个线程来完成分块工作。

## 7. 光栅化分块完成后，进入**光栅化**阶段。

光栅化是将每个块变成位图，位图可以理解成内存里的一个二维数组，这个二维数组记录了每个像素点信息。合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68701eedff0f4be78dd2cdbaca2bf91d~tplv-k3u1fbpfcp-watermark.image?) GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。光栅化的结果，就是一块一块的位图。 ## 8. 画最后一个阶段就是**画**了

合成线程拿到每个层、每个块的位图后，生成一个个`「指引（quad）」`信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是`transform`效率高的本质原因。合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。 ## 总结再让我们来回顾一遍完整过程： - 解析HTML：将字符串解析成`DOM`树和`CSSOM`树 - 样式计算：得到`Computed Style` - 布局：产生布局树 - 分层：划分图层 - 绘制：产生绘制指令集 - 分块：划分区域 - 光栅化：生成位图 - 画：生成`quad`，提交硬件，完成成像 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/690233ec97604ad2826f9ceaa6926bae~tplv-k3u1fbpfcp-watermark.image?) *** 浏览器的渲染原理就讲完啦，你学会了吗？