x 轴是全部周期内的时间，共有三个注解：最大帧率，平均帧率和最低帧率。帧率是网站响应能力的指标。 较低或不一致的帧率可能会使网站显得响应慢或卡死，从而带来不良的用户体验。
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 引起的响应性问题。