在开发工具时间轴中，什么是空的绿色矩形? [英] In the dev tools timeline, what are the empty green rectangles?

问题描述

在Chrome开发者工具的时间轴中，实心的绿色矩形(代表绘制操作)和空的绿色矩形(显然也代表绘制操作...)之间有什么区别?

In the Chrome dev tools timeline, what is the difference between the filled, green rectangles (which represent paint operations) and the empty, green rectangles (which apparently also represent something about paint operations...)?

推荐答案

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

Painting is really two tasks: draw calls and rasterization.

• 绘画通话.这是您要绘制的东西的列表，它是从应用于您的元素的CSS派生的.最终，列出了一系列与Canvas元素相同的绘制调用:moveTo，lineTo，fillRect(尽管它们在Chrome绘画后端Skia中的名称略有不同，但这是一个相似的概念.)
• 栅格化.逐步执行这些绘制调用并将实际像素填充到缓冲区中的过程，该缓冲区可以上传到GPU进行合成.

• Draw calls. This is a list of things you'd like to draw, and its derived from the CSS applied to your elements. Ultimately there is a list of draw calls not dissimilar to the Canvas element's: moveTo, lineTo, fillRect (though they have slightly different names in Skia, Chrome's painting backend, it's a similar concept.)
• Rasterization. The process of stepping through those draw calls and filling out actual pixels into buffers that can be uploaded to the GPU for compositing.

因此，在这种背景下，我们开始:

So, with that background, here we go:

• 绿色实心是Chrome正在记录的绘图调用.这些在JavaScript，样式计算和布局以及主线程上完成.这些绘制调用被分组为一个数据结构，并传递到合成器线程.
• 空绿色块是栅格化.这些由合成器产生的辅助线程处理.

• The solid green blocks are the draw calls being recorded by Chrome. These are done on the main thread alongside JavaScript, style calculations, and layout. These draw calls are grouped together as a data structure and passed to the compositor thread.
• The empty green blocks are the rasterization. These are handled by a worker thread spawned by the compositor.

从本质上讲，两者都是油漆，它们仅代表整个工作的不同子任务.如果您遇到性能问题(并且从提供的抓斗中似乎受到油漆的束缚)，那么您可能需要检查通过CSS或JavaScript更改的属性，并查看是否有仅使用合成器的方法才能实现同样的目的. CSS触发器可能可以在这里提供帮助.

Essentially, then, both are paint, they just represent different sub-tasks of the overall job. If you're having performance issues (and from the grab you provided you appear to be paint bound), then you may need to examine what properties you're changing via CSS or JavaScript and see if there is a compositor-only way to achieve the same ends. CSS Triggers can probably help here.

这篇关于在开发工具时间轴中，什么是空的绿色矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！