Chrome开发工具框架时间轴中的大“空闲”栏

Question

我正在使用requestAnimationFrame绘制一些形状（arc，lineTo等）。 没有什么太花哨，但我注意到一些偶尔的动画片。 我在Chrome开发工具中使用时间轴检查器进行了分析，并且每帧看到大量的空闲时间，其中一些将FPS降至60以下（见截图）。 是否有已知原因或解决方案？

Answer 1

将形状绘制到画布显然在计算上是昂贵的，并且必须属于“未被DevTools检测的活动”。 我通过首先将形状绘制到屏幕外的画布缓存，然后使用drawImage复制回主画布来解决我的性能问题。

Answer 2

将这些峰值与存储器图形进行比较。 根据我的经验，大量闲置峰值似乎与垃圾收集相吻合。