据我所知,白色(空)条代表空闲时间。 我知道我应该集中精力让应用程序运行(最好)> 60fps 并且至少 >30fps
这是我的酒吧:
如您所见,我正在滚动重绘(更改图像的背景位置)。 在这种情况下,中间的线标记为 60fps,如果您仔细观察,还有一条最上面的线(即 30fps)。
我将我的结果与其他人的结果进行了比较,似乎我有相当长的空闲时间。可以吗 ?我知道 paint、javascript 和其他任何东西都不好,但是显示空闲时间有什么用呢?我应该尝试摆脱它吗?如果是的话,我应该注意什么?
此外,由于“图像解码”,有时会出现峰值,我能做些什么吗?
最佳答案
图像解码
您可以减小图像的大小,这将使解码更短。您还可以诱使浏览器更早地执行这些解码,也许是在没有事件的时候,因此不会影响您的 FPS。
我还会暂时关闭这些大图像,看看是否可以将您从 30fps 提高到 60fps。
滚动处理程序
您应该尽量减少在滚动处理程序中所做的工作量。您最多应该从 DOM 中获取一个滚动指标和一个时间戳。然后在 requestAnimationFrame
循环中调整样式:http://www.hesslerdesign.com/blog/javascript/optimizing-javascript-performance-handling-coordinate-updates/
重漆
background-position
在 WebKit 或 Blink 中没有得到很好的优化,尤其是对于这种用例。我会把图像放到一个 div 中,然后使用 transform: translate(x,y)
滑动它的位置(如果可能的话,将它提升到它自己的层。)如果成功,你就不会重绘每个卷轴上的整个屏幕。
30 FPS 还不错
稳定的 30FPS 实际上看起来比一直在 60 到 45 之间跳跃的东西要好。好奇.. 你是在金丝雀还是在视网膜屏幕上?
一般来说,你在硬件上做得很好,但我会尽量减少这些图像解码。如果需要,您可以进一步了解上述内容。
关于javascript - 在 DevTools 中读取 Chrome 帧率结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17465886/