据我所知，白色（空）条代表空闲时间。我知道我应该专注于使应用程序运行（最好）> 60fps 并且至少> 30fps
这是我的酒吧：
如您所见，我正在滚动重新绘制（更改图像的背景位置）。在这种情况下，中间线标记为 60fps，如果你仔细观察，有一条顶线（即 30fps）。
我已经将我的结果与其他人进行了比较，似乎我有相当长的空闲时间。可以吗 ？我知道绘画、javascript 和其他任何东西都不好，但是显示空闲时间有什么用呢？我是否应该尝试摆脱它，如果是，我应该注意什么？
此外，由于“图像解码”，有时会出现峰值，我能做些什么吗？
图像解码
您可以减小图像的大小，这将使解码更短。您还可以诱使浏览器提前进行这些解码，也许是在没有活动的时候，因此不会损害您的 FPS。
我也会暂时杀死这些大图像，看看是否能让你从 30fps 提高到 60fps。
滚动处理程序
您应该尽量减少您在滚动处理程序中所做的工作量。最多你应该从 DOM 中获取一个滚动指标和一个时间戳。requestAnimationFrame然后循环调整样式： http ://www.hesslerdesign.com/blog/javascript/optimizing-javascript-performance-handling-coordinate-updates/
重漆
background-position在 WebKit 或 Blink 中没有得到很好的优化，尤其是对于这种用例。我会将图像放入 div 并使用 a 滑动其位置transform: translate(x,y)（如果可能，将其提升到自己的图层。）如果成功，您将不会在每次滚动时重新绘制整个屏幕。
30 FPS 不坏
稳定的 30FPS 实际上看起来比一直在 60 到 45 之间跳跃的东西要好。好奇..你是在 Canary 还是在视网膜屏幕上？