导航流程 | 从输入 URL 到页面展示，浏览器都做了什么？流程概览整个过程需要各个继承之间的配合，所以在流程开始之前

流程概览

整个过程需要各个继承之间的配合，所以在流程开始之前，我们快速回顾下浏览器进程、渲染进程和网络进程的主要职责。

主流程可概括为以下几步：

渲染流程做了几件最重要的事情，分别是：

渲染流程按时间顺序可分为以下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建 DOM 树的输入内容是 HTML 文件，经由 HTML 解析器解析，最终输出树状结构的 DOM。

为什么要做这一步转化，因为浏览器无法理解 HTML 文件，只能理解 DOM 树结构。

样式计算的目的是计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步。

将 CSS 文档、内联 CSS、link 的外部 css 文档处理成 styleSheets，浏览器只能理解 styleSheets 结构。该结构同时具备了查询和修改功能。
标准化样式表中的属性值，例如将color:white转化成color:#fff
根据 CSS 的继承规则和层叠规则，计算出 DOM 树中每个节点的具体样式。

我们现在拥有 DOM 树和 DOM 树中元素的样式，但我们还需要计算出 DOM 树中可见元素的几何位置，才能将页面完整的显示出来。在布局阶段我们需要完成两个任务：

页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-index 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。

明确定位属性的元素、定义透明属性的元素、使用 CSS 滤镜的元素等，都拥有层叠上下文属性。

{
    pisition: fixed;
    z-index: 2;
    filter: blue(5px);
    opacity: 0.5;
}

当元素或者元素树设置了宽高，并且元素内容超过了宽或者高，那么这个元素就需要被剪裁，或者需要添加滚动条。那么这个元素也会被赋予层叠上下文属性。

在完成图层树的构建后，渲染引擎会把图层树中每个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表。在图层绘制阶段，输出的内容就是这些待绘制列表。

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

合成线程会将每个图层划分成多个图块，再把每个图块转换为位图，这一转换过程会使用 GPU 来加速。最终产物就是许许多多的位图，这些位图按照顺序组成起来才能成为一个完整的页面（也就是渲染后的图层）。

一旦所有图块都转换为位图后，合成线程就会生成一个绘制图块的命令，并将该命令提交给浏览器进程。

浏览器进程接收到命令后，根据命令内容将页面内容绘制到内存中，最后将内存显示在屏幕上。

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

这个过程需要触发几乎完整的渲染流程【从计算 styleSheets 到合成和显示】，所以重排导致的开销是最大的。

通过 JavaScript 或者 CSS 修改元素的颜色属性等，那么浏览器将跳过布局和分层阶段，所以执行效率会比重排操作要高一些。

通过 CSS 的 transform 来实现动画效果，那么浏览器将会避开重排和重绘阶段，直接在非主线程上执行合成动画操作，所以相对于重绘和重排，合成能大大提升绘制效率。