光栅化跨越多个帧的油漆的意义是什么

Question

我已经开始使用Chrome的时间轴工具调查应用程序的客户端性能。但是，尽管我找到了许多有关如何使用它们的文章，但有关如何解释结果的信息却很少，而且常常很模糊。

目前，我正在研究滚动性能并尝试达到60FPS。

此屏幕快照显示了我最近的时间轴记录的结果。可以看出，大多数帧超过60 FPS，有些超过30 FPS。

如果我放大一个特定的帧-持续时间为67.076ms的一帧，我会看到一些东西：

1. 帧的持续时间为67毫秒，但总计时间为204毫秒
2. 这段时间花了201ms，但该帧中的两个绘制事件的持续时间分别为1.327 ms和0.106 ms
3. JS事件，更新图层树和绘画事件的总持续时间仅为2.4毫秒
4. 有一个长长的绿色空心条（光栅化油漆），它持续帧的持续时间，实际上是在帧之前开始并在帧之后继续。

我对此有一些疑问：

1. 总计时间远远长于帧时间-假设这些是并行进程是否正确？
2. 帧的绘制时间（204ms）远远超过了两个绘制事件的时间（1.433ms）-这是因为它包括栅格化绘制事件
3. 为什么光栅化绘画事件跨越多个帧？
4. 从哪里开始优化呢？
5. 最后，有人可以指出一些很好的资源来理解这一点吗？

Answer 1

这是“经典”瀑布时间轴视图合并多个事件的方式的不幸结果。如果您展开那个长的“光栅化绘制”事件，您将看到一堆单独的事件，这些事件会稍微短一些。您可能确实想切换到火焰图模式来排除渲染性能故障，其中光栅化事件显示在适当的线程上。