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

在Chrome开发工具时间轴中，填充的绿色矩形（表示绘制操作）和空白的绿色矩形（显然也表示绘制操作的某些内容）之间有什么区别

---

绘制实际上是两项任务：绘制调用和光栅化

• 绘制调用。这是您希望绘制的内容列表，它源自应用于元素的CSS。最终，有一个与Canvas元素相同的draw调用列表：moveTo、lineTo、fillRect（尽管它们在Chrome的绘画后端Skia中的名称略有不同，但这是一个类似的概念）
• 光栅化。单步执行这些绘制调用并将实际像素填充到缓冲区的过程，缓冲区可以上载到GPU进行合成

因此，在这样的背景下，我们开始：

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

---

从本质上说，两者都是绘画，它们只是代表整个工作的不同子任务。如果您有性能问题（从您提供的抓取中，您似乎受到了绘画的限制），那么您可能需要检查您正在通过CSS或JavaScript更改哪些属性，并查看是否有一种只有合成器才能达到相同目的的方法。保罗，很高兴看到你在网上分享你的知识！非常感谢。这很有道理。CSS触发器是个好主意。看起来我应该使用transform，而不是我目前的工作方式。所以，你不仅回答了我的问题，而且大大提高了我网站的性能\很高兴能帮上忙@卢卡，我很乐意尝试回答其他问题，只需指向我：）@PaulLewis你是否将现有的绿色绘制矩形拆分为两个矩形，或者新的光栅化矩形是对白色（空闲）矩形的解密？@basecode Chrome的架构已经改变。过去，draw调用之后会立即在主线程上进行光栅化，直到最近，这才成为两个截然不同的任务。独立于此，我们已经在Chrome的更多区域安装了仪器，所以我想这两者都有点像！