浏览器渲染原理

渲染时间点

网络线程：请求 HTML 字符串，并添加渲染任务到渲染主线程的消息队列中。

渲染主线程：从消息队列中取出渲染任务，开始渲染流程。

渲染流水线

• 解析 HTML - Parse HTMl

将 HTML 字符串解析成 DOM 树、CSS Object Model 树。

• 样式计算 - Recalculate Style

CSS 属性值的计算过程。

• 布局 - Layout

DOM 树 和 Layout 树不一定是一一对应的。如 DOM 树中的「display：none」 在 Layout 树中不显示，在 DOM 树中不显示的「：：before」在 Layout 树中会显示。

• 分层 - Layer

• 绘制 - Paint

为每一个层生成如何绘制的指令。

渲染主线程的工作到此为止，剩余的步骤交给其他线程完成。

• 分块 - Tiling

分块会将每一层分为多个小的区域。分块的工作时交个多个线程同时进行的。

• 光栅化 - Raster

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

• 画 - Draw

合成线程计算出每个位图在屏幕上的位置，交个 GPU 进行最终呈现。