我刚刚观看了Google I/O会话Jank Busters:构建Performant Web Apps,其中发言者解释了如何在Chrome Web检查器时间轴中使用新的"框架"视图.
这是我在正在开发的页面上滚动时获得的示例录制:

正如您所看到的,某些帧中存在巨大延迟但在时间线中没有任何明显原因(黄色"Timer Fired"事件之间存在较大差距).如何解决性能问题以便始终如一地提高帧速率?
performance google-chrome web-inspector google-chrome-devtools
我正在绘制一些形状(弧形,线条等)requestAnimationFrame.没有什么太花哨,但我注意到一些偶尔的动画片.我在Chrome开发工具中使用时间轴检查器进行了分析,并且每帧看到大量的空闲时间,其中一些将FPS降至60以下(见截图).是否有已知原因或解决方案?

javascript performance canvas google-chrome-devtools requestanimationframe