javascript - 在 DevTools 中读取 Chrome 帧率结果

标签 javascript performance google-chrome-devtools repaint frame-rate

据我所知,白色(空)条代表空闲时间。 我知道我应该集中精力让应用程序运行(最好)> 60fps 并且至少 >30fps

这是我的酒吧: enter image description here

如您所见,我正在滚动重绘(更改图像的背景位置)。 在这种情况下,中间的线标记为 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/

相关文章:

c++ - 从一个巨大的列表中删除大量字符串

google-chrome-devtools - Firefox 开发者工具截断长网络响应,Chrome 不显示

javascript - 创建可以通过点符号调用的子函数

java - 显示网格 Swing 定时器

javascript - OWL Carousel afterMove 获取 img alt

java - 这个小小的错别字会产生什么样的影响呢?

google-chrome-devtools - 清除 chrome devtools 历史记录

javascript - 如何在 Chrome 开发工具中找到跟随脚本加载时间线?

javascript - 在 Three.js 中更改颜色和纹理

javascript - 如何根据条件渲染 JSX?