performance - 光栅化绘制跨越多个帧的意义是什么

Question

我已经开始使用 Chrome 的时间轴工具研究我的应用程序的客户端性能。然而，虽然我找到了很多关于如何使用它们的文章，但关于如何解释结果的信息却比较稀少，而且往往含糊不清。

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

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



如果我放大某一帧——持续时间为 67.076 毫秒的那一帧，我可以看到一些东西:

帧的持续时间为 67ms，但聚合时间为 204ms

这段时间的 201 毫秒用于绘制但是两个绘制事件
此帧的持续时间为 1.327 毫秒和 0.106 毫秒

JS 事件、更新层树和绘制事件的总持续时间为
仅 2.4 毫秒

有一个长长的绿色空心条(光栅化Paint)
它持续帧的持续时间，实际上开始之前和
在它之后继续。

我有几个问题:

聚合时间远远长于帧时间 - 是吗
假设这些是并行进程是否正确？

帧的绘制时间 (204ms) 远远超过两个绘制事件的时间 (1.433ms) - 这是因为它包括
光栅化绘制事件

为什么光栅化绘制事件跨越多个帧？

从哪里开始优化这个？

最后有人可以指出我一些很好的资源来理解这一点吗？

Answer 1

这是“经典”瀑布时间轴 View 合并多个事件的方式的不幸结果。如果你展开那个长的“光栅化绘制”事件，你会看到一堆单独的事件，它们会更短一些。您可能真的想切换到火焰图模式来解决渲染性能问题，其中光栅化事件显示在适当的线程上。