浏览器渲染原理

什么是渲染？

HTML字符串–>像素信息
网络线程通过通信拿到HTML文档，产生渲染任务，并将其传递给渲染主线程的消息队列
在事件循环机制的作用下，渲染主线程去除消息队列中的渲染任务，开启渲染流程
渲染流程分为多个阶段：HTML解析、样式计算、布局、分层、绘制、分块、光栅化

解析HTML(Parse HTML)

将HTML字符串解析成DOM（Document object model）树和CSSOM（CSS object model）
遇到css代码怎么办？
启动一个预解析线程，帮忙先解析css，然后将任务传递给渲染主线程生成CSSOM
遇到script怎么办？
渲染主线程遇到JS时必须暂停一切行为，等待下载执行完后才能继续
这是因为JS可能会改变dom结构

样式计算

现在我们已经有了DOM树和CSSOM树，遍历DOM树，我们通过样式计算决定树上每一个节点的样式。

布局

根据Computed Style，计算出Layout树（布局树）
布局阶段会一次扁你DOM树的每一个节点，计算每个节点的几何信息。
内容必须放在行盒中

分层（Layer）

主线程将会使用一套复杂的策略对整个布局树进行分层。
分层的好处在于，将来某个一个层改变后，仅会对该层进行后续处理，从而提高效率。

绘制（Paint）

主线程会为每个层单独产生绘制指令集（指令的集合），用于描述这一层的内容该如何画出来
完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成
合成线程首先对每个图层进行分块，将其划分为更多的小区域。
它会从线程池中拿取多个线程来进行分块工作。

分块（Tiling）

分块会将每一层分为多个小的区域，这个过程是由合成线程来完成的

光栅化（Raster）

光栅化是将每个块变成位图，优先处理靠近视口的块，此过程会用到GPU加速

画

合成线程拿到每个层、每个块的位图后，生成一个个指引（quad）信息。
指引会表示出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。
变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。
合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像