帧率

翻译不完整。 请帮助我们翻译这篇文章!

帧率是网站响应能力的指标。 较低或不一致的帧率可能会使网站显得响应慢或卡死,从而带来不良的用户体验。

60 fps 的帧率是站点流畅展示的目标,因此,为响应某些事件所需的所有更新,您需要 16.7 ms 的时间预算。

“性能”工具中的帧率图显示了录制过程中的帧率。 它可以快速指出您的站点可能出现问题的位置,使您可以使用其他工具进行更深入的分析。

帧率和响应

帧率是视频设备可以产生图像(或帧)的速率。 电影和游戏最熟悉它,但现在已广泛用作网站和 Web 应用程序的性能指标。

在网络性能中,帧封装了浏览器为了更新和重绘屏幕而需要做的工作。 帧率最明显地适用于动画:如果帧率太低,则动画将看起来有抖动,而更快的帧率将使得动画更流畅。 但是,当用户与网站交互时,帧率也可以作为衡量网站响应能力的常用指标。

例如,如果将鼠标移到某个页面元素上触发了一些 JavaScript,这些 JavaScript 改变了元素的外观,并触发了重排和重绘,那么所有这些工作都需要在该帧中完成。 如果浏览器处理该帧花费的时间太长,那么浏览器将显示暂时无响应(卡顿)。

同样的,如果页面滚动涉及很多复杂的页面更新,并且浏览器无法保持可接受的帧率,则滚动页面将显得缓慢或卡死。

通常,较高且一致的帧率将使用户与站点的交互更加舒服。

60 fps 的帧率被认为是实现流畅显示的目标,因此,为响应某些事件而需要同步进行的所有更新,需要在 16.7 ms 内完成。

但是,一致性尤为重要:如果您无法提供 60 fps,则最好以更低的速率连续提供更好的帧率,并避免帧速率突然下降而导致站点假死。

帧率图

可以在“性能”工具的“录制概览”中找到帧率图。 当浏览器完成一帧时需要花费一个时间戳,并使用它来跟踪记录过程中的帧率。

x 轴是全部周期内的时间,共有三个注解:最大帧率,平均帧率和最低帧率。

使用帧率图

帧率图的最大的价值在于,它和 Web 控制台一样,可以快速指出您的站点可能出现问题的位置,从而使您可以使用其他工具进行更深入的分析。 例如,这是性能文件的屏幕截图:

您可以看到平均帧率在一定程度上是正常的,但是有三个点,帧率会崩溃数 10 毫秒。 对于页面中正在播放的任何动画,这无疑会引起明显的停顿。

帧率图与位于其直接上方的瀑布摘要相关,并且可以看到帧率的前两个下降与橙色条形相关,这是花费在执行JavaScript上的时间。

如果我们从记录的这些片段中选择一个,则其下方的主瀑布视图将会把它放大,然后我们可以看到导致问题的函数:

我们有一个来自 click 事件的 JavaScript 函数,该函数会将主线程阻塞了 170 毫秒。

但是,是哪个功能呢? 切换到火焰图查看当时的调用堆栈:

出问题的函数称是  doPointlessComputations(),它在 “ main.js” 中定义。 要解决此问题,我们可以考虑将其拆分为多个部分,然后在 requestAnimationFrame 中运行这些部分,甚至在 worker 中运行整个函数。 密集型 JavaScript 文章展示了哪些策略可以来解决由长时间运行的同步 JavaScript 引起的响应性问题。