Devtools中的Timeline Paint Profiler表明一切都在被绘制

Question

当我们在Chrome中使用Paint Profiler时,我们可以看到正在绘制的内容.我创建了一个简单的示例,每3秒向页面添加一个新的div,这里显示的是绘制的:

但是当我在时间轴中使用paint Profiler时,看起来所有东西都被重新绘制:

如截图所示,在第五个绘图上,我们有5个调用drawTextBlob调用.这表明所有5个div都画了.我只期待一个.

有人可以对此有所了解吗？

Answer 1

"Paint"事件的确切含义随着时间的推移而发生了变化.曾经是在Paint期间,渲染器直接更新了图层的位图,这通常很慢.在那些日子里,您可能会发现绘制的矩形与实际无效的区域匹配(即,只是您的情况下的最后一行),正如您可能期望的那样.

Chrome的渲染子系统的当前实现在其他线程上执行光栅化(试图将主要线程与JavaScript执行,DOM布局和许多其他东西保持足够关系)或在GPU上执行光栅化(检查"光栅化"和"多个光栅线程"在chrome:// gpu中,如果你很想知道平台上的当前模式是什么).因此,您在主线程上看到的"Paint"事件只包括记录绘制命令的日志(即您在Paint Profiler的左侧窗格中看到的内容),而不会实际产生任何像素 - 这相对较快,而Chrome选择重新记录整个图层,以便稍后可以选择光栅化的哪一部分(例如在预期的滚动情况下),而无需再次进入主线程,

现在,如果您将时间轴切换到火焰图模式(工具栏中"视图"标签附近的右侧图标),您将看到"Rasterize Paint"事件,这是实际的光栅化 - Chrome选择在主线程上的Paint事件期间记录的绘制命令日志并重新播放它,为图层片段生成实际像素.选择"栅格化绘制"时,可以看到栅格化的图层部分以及此部件的"Paint Profiler".请注意,不同的片段有许多小的Rasterize Paint事件,可能在不同的线程上,但它们仍然都有整个日志(例如,在您的示例中有5个drawTextBlob命令).但是,那些不影响光栅化片段的绘制命令将被剔除,因为它们落在片段的剪辑矩形之外,因此赢得了'

然后,您可能会注意到被栅格化的片段仍然大于您实际失效的区域.这是因为Chrome根据图块,小矩形位图(通常为128 x 128,但可能因平台而异)管理栅格化图层,因此对于大图层(例如,比视口长得多的页面),只有视口中可见的部分才可以存储在GPU上(通常具有有限的内存),并且可以快速上传由于滚动而突然变得可见的部分.

最后,您在渲染选项中勾选"显示绘制矩形"时看到的用绿色突出显示的部分在技术上是一个"失效"矩形 - 也就是说,这是因为更改而真正改变的页面区域这些区域是你真正作为作者可以直接影响的区域,但正如你所看到的,Chrome可能会更多地绘制和栅格化,主要是出于对有效管理大页面滚动的担忧.