【发布时间】：2014-12-10 01:53:20
【问题描述】：
在 Chrome 开发工具时间线中，填充的绿色矩形（表示绘制操作）和空的绿色矩形（显然也表示绘制操作的某些内容...）之间有什么区别？
【问题讨论】：
标签： google-chrome-devtools repaint
【发布时间】：2014-12-10 01:53:20
【问题描述】：
绘画实际上是两个任务：绘制调用和光栅化。
- 抽签。这是您想要绘制的内容列表，它源自应用于您的元素的 CSS。最终有一个与 Canvas 元素没有什么不同的绘制调用列表：moveTo、lineTo、fillRect（尽管它们在 Chrome 的绘画后端 Skia 中的名称略有不同，但这是一个相似的概念。）
- 光栅化。逐步执行这些绘制调用并将实际像素填充到缓冲区中的过程，这些缓冲区可以上传到 GPU 进行合成。
所以，有了这个背景，我们开始吧：
- 纯绿色块是 Chrome 正在记录的绘图调用。这些是在主线程上与 JavaScript、样式计算和布局一起完成的。这些绘图调用被组合为一个数据结构并传递给合成器线程。
- 空的绿色块是光栅化。这些由合成器生成的工作线程处理。
本质上，两者都是绘画，它们只是代表整个工作的不同子任务。如果您遇到性能问题（并且从您提供的抓取中，您似乎受到了油漆限制），那么您可能需要检查您通过 CSS 或 JavaScript 更改的属性，并查看是否有仅合成器的方法来实现同样的结局。 CSS Triggers 在这里可能会有所帮助。
【讨论】：
-
保罗，很高兴看到你分享你的知识！
-
谢谢！这很有意义。 CSS Triggers 是个好主意。看起来我应该使用转换而不是我目前正在做的事情。因此，您不仅回答了我的问题，而且大大提高了我网站的性能！
-
\o/ 很高兴能帮上忙。 @Luca，我很乐意尝试回答其他问题，请指点我：)
-
@PaulLewis 您是否将现有的绿色油漆矩形拆分为 2 个矩形，或者新的光栅化矩形是对白色（空闲）矩形的揭秘？
-
@basecode Chrome 的架构发生了变化。过去，绘制调用之后会立即在主线程上进行光栅化，并且只是在过去不久，这变成了两个不同的任务。除此之外，我们一直在检测 Chrome 的更多领域，所以我猜两者兼而有之！