浏览器如何渲染页面

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

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

---

HTML解析（parse html）：

        为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和外部的JS文件。

        如果主线程解析到‘link’位置，此时外部的CSS文件还没有下载解析好，主线程不会等待，继续解析后续的HTML。因为有预解析线程。这是CSS不会阻塞HTML解析的根本原因。

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

        解析完HTML后，会得到DOM树（Document Object Model）和CSSOM树（CSS Object Model），浏览器的默认样式、内部样式、外部样式、行内样式均包含在CSSOM树中。

样式计算（Recalculate Style）：

        主线程会遍历得到的DOM树，依次为树中的每个节点计算出它的最终样式（Computed Style）。这一过程中，很多预设值会变成绝对值，相对单位会变成绝对单位。

        这一步完成后，会得到带有样式的DOM树。

布局（Layout）：

        遍历DOM树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。大部分时候，DOM树和布局树（layout树）并非一一对应。要看节点有无几何信息。

分层（Layer）：

        主线程会使用一套复杂的策略对整个布局树进行分层。

分层的好处在于，对某一个层改变后，仅会对该层进行后续处理，不影响其他层，从而提升效率。

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

绘制（Paint）：

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

分块（Tiling）：

        完成绘制后，主线程将每个图层的绘制信息提交给合成线程完成。合成线程首先对每个图层进行分块，将其划分为更多的小区域。它会从线程池中拿取多个线程来完成分块工作。

光栅化（Raster）：

        合成线程将块信息交给GPU进程，以极高的速度完成光栅化。GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

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

画（Draw）：

        合成线程拿到每个层，每个块的位图后，生成一个个quad（指引）信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。

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

        合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。

---

前端学习笔记：参考渡一官方