Chrome 开发工具中的“Paint”和“Rasterize Paint”有什么区别？答案

【问题标题】：What is the difference between "Paint" and "Rasterize Paint" in Chrome dev-tools?Chrome 开发工具中的“Paint”和“Rasterize Paint”有什么区别？
【发布时间】：2019-04-18 08:55:32
【问题描述】：

我一直在阅读 chrome here 和 here 中的关键渲染路径。我从这些资源中的理解是，“合成”步骤发生在主线程之外，并且依赖于前面的“绘制”步骤，该步骤生成要合成在一起的栅格化图层。

但是，当我在 Chrome 开发工具中查看位置动画的单帧期间发生的情况时，我看到了这一点：

看起来“合成”发生在主线程上，这不是我阅读这些资源所理解的。
在合成之前在主线程上有一个绘制步骤，但是在“光栅化线程”上合成之后还有另一个“光栅化绘制”步骤。

那么“Paint”和“Rasterize Paint”有什么区别，为什么在合成完成后会发生光栅化绘制步骤？为什么合成似乎发生在 chrome dev-tools 的主线程上，但文档将其描述为发生在不同的线程上？

【问题讨论】：

1) 我想你应该在 Paint 块下的 GPU 进程中看到一个相应的块，对于 Compositing layers 和 Compositor 进程也是如此； 2）我猜合成层是为合成器准备层来合成； 3）由于Chrome使用Skia，我猜“Paint”是调用Skia的一部分，而“Rasterize Paint”是在Skia内部完成的实际光栅化。 4) 我怀疑 Chromium 工程师会看到这个问题，所以我认为值得在 crbug.com 或 chromium 的 IRC 频道或他们的一些 Google 开发人员小组中提问。

标签： google-chrome google-chrome-devtools web-performance

【解决方案1】：

根据this article：

您可能会听到与绘画结合使用的术语“光栅化”。这是因为绘制实际上是两个任务：1）创建绘制调用列表，以及 2）填充像素。
后者称为“光栅化”，因此每当您在 DevTools 中看到绘制记录时，您应该将其视为包括光栅化。（在某些架构中，创建绘制调用列表和光栅化是在不同的线程中完成的，但这不受开发人员控制。）

光栅化也是将矢量图像转换为像素矩阵的动作。

【讨论】：