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

Question

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

Answer 1

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

Answer 2

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