Chrome 开发工具中的大“空闲”栏帧时间轴答案

【问题标题】：Large "idle" bars in Chrome dev tools Frames TimelineChrome 开发工具中的大“空闲”栏帧时间轴
【发布时间】：2014-06-03 16:33:46
【问题描述】：

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

【问题讨论】：

类似问题：one、two、three。没有有用的信息。对this G+ post by Nat Duca 的一些引用，但我没有对 3D 变换做任何事情，所以我认为它不适用。
来自DevTools documentation：“您可能会注意到框架的浅灰色或透明（空心）区域。这些区域分别表示：1.) DevTools 2 未检测到的活动。 ) 显示刷新周期之间的空闲时间。下面记录中的帧显示了未检测的活动和空闲时间。但是，这并不能真正解释如何解决问题。如果帧的清除部分是空闲时间，为什么会导致帧跳过？
我也有同样的问题；帧在 3 毫秒内完成，但有疯狂的空闲时间，有时是 200 毫秒；是什么赋予了？损坏的开发工具？

标签： javascript performance canvas google-chrome-devtools requestanimationframe

【解决方案1】：

将这些峰值与内存图进行比较。根据我的经验，大量空闲峰值似乎与垃圾收集同时发生。

【讨论】：

【解决方案2】：

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

【讨论】：

您是否可以发布改进后的时间线资料？
@sethro 界面好像变了一点，但是here's a similar screenshot。请注意，计算/渲染很好地落在每个 ~16ms 帧内。