一帧剖析

开发人员总是会问我关于像素渲染管道流的细节问题，例如它的每一步是如何触发的、何时触发的，以及为什么触发。这篇文章就是为了解答这些疑惑的，希望你读完后对像素是如何渲染到屏幕上的有了更深入的了解。

需要注意的是，以下讲解基于 Blink 内核的 Chrome 浏览器。例如，像 layout 或 style calcs 等步骤运用了很多成熟的技术，本文不会对它们进行过多的讲解。

像素渲染管道流

1. 创建一个新图层

在 DOM 被解析为 render tree 后，浏览器需要将其分成图层。图层是将 DOM 节点分组的方式，这样 GPU 就可以并行渲染它们。

2. 计算每个图层的绘制列表

一旦图层被创建，浏览器就会为每个图层计算一个绘制列表。绘制列表是一组指令，告诉 GPU 如何渲染图层。

3. 将绘制列表发送到 GPU

绘制列表被发送到 GPU 后，GPU 就会开始渲染图层。这个过程是并行的，这意味着 GPU 可以同时渲染多个图层。

4. GPU 光栅化图层

光栅化是将图层转换为一组像素的过程。GPU 使用一种叫做片段着色器（fragment shader）的程序来执行此操作。

5. GPU 应用效果

一旦图层被光栅化，GPU 就会应用各种效果，例如抗锯齿和模糊。这些效果是由 GPU 上的另一个程序叫做顶点着色器（vertex shader）执行的。

6. GPU 将像素发送到显示器

最后，GPU 将像素发送到显示器。显示器将像素转换为光线，然后你就可以在屏幕上看到它们了。

每一步是怎样触发的

什么触发了创建新图层？

以下是一些会触发创建新图层的操作：

• 创建一个新的 DOM 元素
• 更改 DOM 元素的样式
• 移动 DOM 元素
• 对 DOM 元素进行动画处理

什么触发了绘制列表的计算？

以下是一些会触发绘制列表计算的操作：

• 滚动页面
• 调整窗口大小
• 更改 DOM 元素的样式
• 对 DOM 元素进行动画处理

什么触发了绘制列表发送到 GPU？

以下是一些会触发绘制列表发送到 GPU 的操作：

• 页面加载完毕
• 滚动页面
• 调整窗口大小
• 更改 DOM 元素的样式
• 对 DOM 元素进行动画处理

何时触发

创建新图层何时触发？

当浏览器解析 DOM 时，它会根据以下标准来决定是否创建一个新图层：

• 元素是否具有加速属性（例如 transform 或 opacity）
• 元素是否具有复合背景（例如背景图像或渐变）
• 元素是否位于另一个具有加速属性的元素内

绘制列表的计算何时触发？

绘制列表的计算在以下情况下触发：

• 页面加载完毕
• 滚动页面
• 调整窗口大小
• 更改 DOM 元素的样式
• 对 DOM 元素进行动画处理

绘制列表发送到 GPU 何时触发？

绘制列表发送到 GPU 的时间取决于以下因素：

• GPU 的负载情况
• 页面上图层数量
• 绘制列表的大小

为什么触发

为什么创建新图层？

创建新图层是为了提高渲染性能。通过将 DOM 节点分组为图层，GPU 可以并行渲染它们。这可以显著提高渲染速度，尤其是在页面上有很多复杂元素时。

为什么计算绘制列表？

绘制列表是告诉 GPU 如何渲染图层的指令集。通过计算绘制列表，浏览器可以确保 GPU 能够正确地渲染图层。

为什么将绘制列表发送到 GPU？

绘制列表被发送到 GPU 是为了让 GPU 开始渲染图层。这个过程是并行的，这意味着 GPU 可以同时渲染多个图层。这可以显著提高渲染速度，尤其是在页面上有很多复杂元素时。