google-chrome-devtools - 在开发工具时间轴中，空的绿色矩形是什么？

Question

在 Chrome 开发工具时间轴中，填充的绿色矩形(代表绘制操作)和空的绿色矩形(显然也代表有关绘制操作的某些内容...)之间有什么区别？

Answer 1

绘画实际上是两个任务:绘制调用和光栅化。

• 绘制调用。这是您想要绘制的内容的列表，它源自应用于您的元素的 CSS。最终有一个与 Canvas 元素没有什么不同的绘制调用列表:moveTo、lineTo、fillRect(尽管它们在 Chrome 的绘画后端 Skia 中的名称略有不同，但这是一个类似的概念。)
• 光栅化。逐步完成这些绘制调用并将实际像素填充到缓冲区的过程，这些缓冲区可以上传到 GPU 进行合成。

所以，有了这个背景，我们开始吧:

• 绿色实心 block 是 Chrome 记录的绘制调用。这些都是在主线程上与 JavaScript、样式计算和布局一起完成的。这些绘制调用被组合在一起作为一个数据结构并传递给合成器线程。
• 空绿色 block 是光栅化。这些由合成器生成的工作线程处理。

本质上，两者都是绘制，它们只是代表整个工作的不同子任务。如果您遇到性能问题(并且从您提供的抓取来看，您似乎受到了绘制限制)，那么您可能需要检查您通过 CSS 或 JavaScript 更改的属性，并查看是否存在仅合成器的方法来实现相同的结局。 CSS Triggers也许可以在这里提供帮助。