Javascript 在DevTools中读取Chrome帧速率结果

据我所知，白色（空）条表示空闲时间。 我知道我应该集中精力，使应用程序运行速度（最多）大于60fps，至少大于30fps

这是我的酒吧：

如您所见，我正在滚动重新绘制（更改图像的背景位置）。 在这种情况下，中间线标记为60fps，如果你仔细观察，会有一条顶线（30fps）

我将我的结果与其他人进行了比较，似乎我有相当长的空闲时间。可以吗？我知道画画、javascript和其他东西都不好，但显示空闲时间有什么用呢？我应该尝试摆脱它吗？如果是，我应该注意什么

---

此外，由于“图像解码”，有时会出现峰值，我能做些什么吗？

图像解码

您可以减小图像的大小，这将使解码更短。您还可以诱使浏览器更早地执行这些解码，可能是在没有活动的时候，因此不会损害您的FPS

我也会暂时删除这些大图像，看看它是否能让你从30帧提高到60帧

滚动处理程序

您应该尽量减少滚动处理程序中的工作量。您最多应该从DOM中获取一个滚动度量，也许还需要一个时间戳。然后在

requestAnimationFrame

循环中调整样式：

重漆

背景位置

在WebKit或Blink中没有得到很好的优化，尤其是对于这种用例。我会将图像放入一个div中，然后使用

transform:translate（x，y）

滑动其位置（如果可能的话，将其提升到自己的层）。如果成功，您不会在每个滚动条上重新绘制整个屏幕

30 FPS不坏

一个稳定的30FPS看起来比一直在60到45之间跳跃的东西要好。好奇。。你是在金丝雀还是在视网膜屏幕上？

---

---

总的来说，你在硬件上做得很好，但我会尽量减少这些图像解码。如果你愿意的话，你可以更进一步。

截图是在稳定的Chrome 27 Macbook Pro OSX Lion上拍摄的。应用程序实际上（即使是这样）并没有那么糟糕，但我正试图掌握框架检查工具。仍然对那些代表空闲时间的空白方块感到困惑。空闲时间是坏的，好的，中性的吗？我想对这个答案进行编辑，以解决关于空闲时间的部分。