当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，开启渲染流程。?
渲染流程可以分为多个阶段：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树中。
? ? ? ? 主线程会遍历得到的DOM树，依次为树中的每个节点计算出它的最终样式（Computed Style）。这一过程中，很多预设值会变成绝对值，相对单位会变成绝对单位。
? ? ? ? 这一步完成后，会得到带有样式的DOM树。
? ? ? ? 遍历DOM树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。大部分时候，DOM树和布局树（layout树）并非一一对应。要看节点有无几何信息。
? ? ? ? 主线程会使用一套复杂的策略对整个布局树进行分层。
分层的好处在于，对某一个层改变后，仅会对该层进行后续处理，不影响其他层，从而提升效率。
滚动条、堆叠上下文、transform、opacity等样式都会或多或少地影响分层结果，也可以通过‘will-change’属性更大程度的影响分层结果。
? ? ? ? 主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。
????????完成绘制后，主线程将每个图层的绘制信息提交给合成线程完成。合成线程首先对每个图层进行分块，将其划分为更多的小区域。它会从线程池中拿取多个线程来完成分块工作。
? ? ? ? 合成线程将块信息交给GPU进程，以极高的速度完成光栅化。GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。
? ? ? ? 光栅化的结果就是一块一块的位图。
? ? ? ? 合成线程拿到每个层，每个块的位图后，生成一个个quad（指引）信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。
? ? ? ? 变形发生在合成线程，与渲染主线程无关，这就是‘transform’效率高的本质原因。
? ? ? ? 合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。
前端学习笔记：参考渡一官方