在开发工具时间轴中,空绿色矩形是什么？

Question

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

Answer 1

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

• 画电话.这是您要绘制的内容列表,它是从应用于您的元素的CSS派生而来的.最终有一个与Canvas元素不同的绘制调用列表:moveTo,lineTo,fillRect(虽然它们在Skia中的名称略有不同,Chrome的绘画后端,这是一个类似的概念.)
• 光栅化.逐步执行绘制调用并将实际像素填充到缓冲区中的过程可以上传到GPU进行合成.

那么,在这背景下,我们走了:

• 该固体绿色街区是由Chrome正在记录的绘制调用.这些是在主线程上完成的,包括JavaScript,样式计算和布局.这些绘制调用被组合在一起作为数据结构并传递给合成器线程.
• 该空绿色街区是光栅化.这些由合成器生成的工作线程处理.

从本质上讲,两者都是油漆,它们只代表整个工作的不同子任务.如果您遇到性能问题(并且从您提供的抓取中看起来像是绑定的),那么您可能需要通过CSS或JavaScript检查您正在更改的属性,并查看是否存在仅使用compositor的方式来实现同样的目的.CSS触发器可能在这里有所帮助.