了解导航流程——从输入URL戴页面展示，这中间发生了什么

快来打我* 2022-10-28 14:27 84阅读 0赞

**目录**

JS,HTML,CSS如何变成页面的？接下来学习这一渲染过程❤

那么这些子阶段是什么呢？有什么特征？

为什么要构建DOM树？

如何进行样式计算？

什么是布局阶段？怎么布局?

分层是什么？

绘制是干什么的?和生成位图一样吗？

为什么要分块？

绘制完进行栅格化，栅格化是什么？有什么作用？

GPU的作用是什么、

在哪里合成？

我们再来看看三个和渲染流水线相关的概念——“重排”“重绘”和“合成”

重排——更新了元素的几何属性

重绘——更新元素的绘制属性

合成——直接合成阶段

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70][]

![6b7dffaa3aa4a82ccad9d402816e2a5a.png][]

从图中可以看出，整个过程需要各个进程之间的配合，回顾下浏览器进程、渲染进程和网络进程的主要职责。

*  浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
 *  网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
 *  渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。

这个过程可以大致描述为如下。

1.  首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。
2.  然后，在网络进程中发起真正的 URL 请求。接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
3.  浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；
4.  渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道；
5.  最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。
6.  浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

## JS,HTML,CSS如何变成页面的？接下来学习这一渲染过程❤ ##

由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示

![4c1ca158f962afaada3236ddc4fe2ac8.png][]

## 那么这些子阶段是什么呢？有什么特征？ ##

流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

1.  开始每个子阶段都有其输入的内容；
2.  然后每个子阶段有其处理过程；
3.  最终每个子阶段会生成输出内容。

## 为什么要构建DOM树？ ##

是因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。

## 如何进行样式计算？ ##

和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。（在chrome的控制台输入只需要在控制台中输入 document.styleSheets）

那么接下来就要对其进行属性值的标准化操作。(以需要将所有值转换为渲染引擎容易理解的、标准化的计算值)

接下来就需要计算 DOM 树中每个节点的样式属性了，如何计算呢？

这就涉及到 CSS 的继承规则和层叠规则了。而继承规则就是CSS 继承就是每个 DOM 节点都包含有父节点的样式，层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。[MSD][]

## 什么是布局阶段？怎么布局? ##

需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。

Chrome 在布局阶段需要完成两个任务：创建布局树和布局计算。

创建布局就是我们还要额外地构建一棵只包含可见元素布局树。

## 分层是什么？ ##

渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree

![f42fd15bb87219b02357e8b9467abebb.png][]

并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。

那么需要满足什么条件，渲染引擎才会为特定的节点创建新的图层呢？

第一点，拥有层叠上下文属性的元素会被提升为单独的一层。[参考][Link 1]

第二点，需要剪裁（clip）的地方也会被创建为图层。例如了文本内容溢出

## 绘制是干什么的?和生成位图一样吗？ ##

渲染引擎实现图层的绘制与之类似，会把一个图层的绘制拆分成很多小的**绘制指令**，然后再把这些指令按照顺序组成一个**待绘制列表**

**绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。**

## 为什么要分块？ ##

在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。

基于这个原因，合成线程会将图层划分为图块（tile），这些图块的大小通常是 256x256 或者 512x512

## 绘制完进行栅格化，栅格化是什么？有什么作用？ ##

当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给**合成线程。合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。**

**而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的**

![fad5d4a03ac78c6a9c0be42ed240938a.png][]

## GPU的作用是什么、 ##

栅格化过程都会使**用 GPU 来加速生成，使用 GPU 生成位图的过程**叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。

渲染进程把生成图块的指令发送给 GPU，然后在 GPU 中执行生成图块的位图，**并保存在 GPU 的内存中。**

![57f954995c446e2c135e9658b944b333.png][]

## 在哪里合成？ ##

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其**页面内容绘制到内存中**，最后再将内存显示在屏幕上。

合成的图层会被提交给浏览器进程，**浏览器进程里会执行显示合成**(Display Compositor)，也就是将所有的图层合成为可以显示的页面图片。 最终**显示器显示的就是浏览器进程中合成的页面图片**

![eb678b08304594cf4599785c50f7dde2.png][]

## 我们再来看看三个和渲染流水线相关的概念——“重排”“重绘”和“合成” ##

这对后续 Web 的性能优化会有很大帮助

## 重排——更新了元素的几何属性 ##

如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排

![706819a14f871990a10472f53c4fc31c.png][]

## 重绘——更新元素的绘制属性 ##

如果修改了元素的背景颜色，那么布局阶段将不会被执行，因为并没有引起几何位置的变换，所以就直接进入了绘制阶段，然后执行之后的一系列子阶段，这个过程就叫重绘。

![b4974daf75c46d04df3bcef8324311fd.png][]

## 合成——直接合成阶段 ##

那如果你更改一个既不要布局也不要绘制的属性，会发生什么变化呢？渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。

![6ddab5e198b5bb622bcbcd061dbb5bb4.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221024/50b2bb42fec342699aa7d75048b538ee.png
[6b7dffaa3aa4a82ccad9d402816e2a5a.png]: /images/20221024/aa8a71ba1cad495880ded9959e61e0ad.png
[4c1ca158f962afaada3236ddc4fe2ac8.png]: /images/20221024/a48c7a32ded94533bc5db311063a4b77.png
[MSD]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade
[f42fd15bb87219b02357e8b9467abebb.png]: /images/20221024/aedf1ca96ead4dc59fe236eabdece052.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
[fad5d4a03ac78c6a9c0be42ed240938a.png]: /images/20221024/65d3c2658d45421e8dbb486bc924f656.png
[57f954995c446e2c135e9658b944b333.png]: /images/20221024/28bed26cdd894b12970f8f9c79dca1a7.png
[eb678b08304594cf4599785c50f7dde2.png]: /images/20221024/2b9b8064fbda4f51b793eaef327216c5.png
[706819a14f871990a10472f53c4fc31c.png]: /images/20221024/97119c41855a41ec81d1abaf98c924d4.png
[b4974daf75c46d04df3bcef8324311fd.png]: /images/20221024/69ad85bcc374417c9bd63cc02d3a915f.png
[6ddab5e198b5bb622bcbcd061dbb5bb4.png]: /images/20221024/c1e36487376c445fabd478fcfcefb72f.png