栅格化绘制在多个帧上延伸的重要性

Question

我已经开始使用Chrome的时间线工具调查我的应用的客户端性能。然而，虽然我发现了很多关于如何使用它们的文章，但是关于如何解释结果的信息更加稀疏且经常含糊不清。

目前我正在查看滚动性能并试图达到60FPS。

此屏幕截图显示了我最近的时间线录制结果。 可以看出，大多数帧都超过60 FPS，有几帧超过30 FPS。

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

1. 帧的持续时间为67毫秒，但聚合时间为204毫秒
2. 这次201毫秒花在绘画上，但两个油漆事件 此帧的持续时间为1.327 ms和0.106 ms
3. JS事件，更新图层树和绘制事件的总持续时间是 只有2.4毫秒
4. 有一个长绿色空心条（栅格化漆） 它持续帧的持续时间，实际上是在和之前开始的 继续它。

我对此有几个问题：

1. 聚合时间远远超过帧时间 - 是吗？ 是正确的假设这些是并行的过程吗？
2. 画面的绘画时间（204ms）远远超过两个绘画事件的时间（1.433ms） - 这是因为它包括 光栅化油漆事件
3. 为什么栅格化绘制事件跨越多个帧？
4. 哪里会开始优化这个？
5. 最后有人能指点我一些很好的资源来理解这个吗？

Answer 1

“经典”瀑布时间轴视图合并多个事件的方式有点不幸。如果你展开那么长的“Rasterize Paint”事件，你会看到一堆个别事件，这些事件会稍微缩短一些。您可能真的想切换到火焰图模式以解决渲染性能问题，其中栅格化事件显示在适当的线程上。