我已经开始使用Chrome的时间轴工具调查应用程序的客户端性能。但是，尽管我找到了许多有关如何使用它们的文章，但有关如何解释结果的信息却很少，而且常常很模糊。
目前，我正在研究滚动性能并尝试达到60FPS。
此屏幕快照显示了我最近的时间轴记录的结果。
可以看出，大多数帧超过60 FPS，有些超过30 FPS。
如果放大一个特定的帧-持续时间为67.076ms的一帧，我会看到一些东西：
帧的持续时间为67毫秒，但总计时间为204毫秒
这段时间花了201毫秒，但绘制了两个绘画事件
该帧的持续时间为1.327 ms和0.106 ms
JS事件，更新图层树和绘画事件的总持续时间为
仅2.4毫秒
有一个长长的绿色空心条（光栅化油漆）
它持续一帧的持续时间，实际上是在
之后继续。
我对此有一些疑问：
总计时间远比帧时间长-是吗
正确地假设这些是并行过程？
该帧的绘制时间（204ms）远远超过了两个绘制事件的时间（1.433ms）-这是因为它包括
光栅化绘画事件
为什么光栅化绘画事件跨越多个帧？
从哪里开始优化呢？
最后，有人可以指出一些很好的资源来帮助我理解这一点吗？
最佳答案
这是“经典”瀑布时间轴视图合并多个事件的方式的不幸结果。如果扩展该较长的“栅格化绘画”事件，您会看到很多单独的事件，这些事件将略短一些。您可能真的想切换到“火焰图”模式来对渲染性能进行故障排除，在此模式下，光栅化事件显示在适当的线程上。
关于performance - 光栅化跨越多个帧的油漆的意义是什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32959286/