FPS 计数器

当前 FPS
FPS
下一个

用这个 FPS 计数器测量浏览器渲染当前页面是否流畅。它通过 requestAnimationFrame 采样帧,报告当前、平均、最低和最高帧率,还能绘制一张简短图表,帮你找出因标签页占用过高、动画、扩展程序、性能限制或显示设置而出现的掉帧。

如何测量浏览器帧率

  1. 1

    选择采样时长

    5 秒是不错的默认值。若想捕捉周期性卡顿或后台负载变化,可延长采样时间。

  2. 2

    设置平滑与警告阈值

    平滑窗口会对最近的帧取平均值,阈值则标出你认为该测试设备可以接受的帧率水平。

  3. 3

    运行计数器并查看波动范围

    当前 FPS 反映最近的渲染速度。平均值、最低值和最高值则说明整段测试是一直流畅,还是出现过明显掉帧。

FPS 计数器测的是什么

本工具测量的是浏览器的渲染节奏,而不是显卡的跑分性能。每当浏览器准备绘制下一帧时,requestAnimationFrame 就会调用采样器。两次回调之间的时间差即可得到瞬时帧率:

FPS = 1000 / frame_time_in_ms

界面显示的当前 FPS 是平滑窗口上的移动平均值。60 帧的窗口很适合常见的 60Hz 显示器:既能抹平单帧的尖峰,又不会掩盖持续性的掉帧。窗口越小反应越快,窗口越大看起来越平稳。

实例演算

假设一次 5 秒采样记录到以下简化后的帧间隔:

帧间隔 瞬时 FPS 说明
16.7 毫秒 59.9 FPS 60Hz 的典型渲染
8.3 毫秒 120.5 FPS 120Hz 的典型渲染
25.0 毫秒 40.0 FPS 在很多显示器上会明显感到变慢
33.3 毫秒 30.0 FPS 负载过重或被限制性能

如果你的警告阈值是 50 FPS,而测得的移动平均值最终停在 47 FPS,那么即使个别帧更快,结果仍未达标。如果最终接近 60 FPS,只是偶尔掉到 45 FPS,平均值算是健康的,但最低值提示存在值得排查的卡顿。

结果解读

结果特征 可能含义 下一步检查
平均值接近刷新率,很少掉帧 渲染状况良好 必要时再与其他浏览器对比
平均值不错,最低值低很多 周期性卡顿 关闭占用高的标签页,或检查动画
平均值低于阈值 渲染负载持续偏高 检查 CPU 占用、扩展程序和页面脚本
帧率被限制在 30 左右 省电模式或性能限制 检查电池模式与显示设置

浏览器帧率会受显示器刷新率、操作系统合成器、电池模式、过热降频、已打开的标签页以及页面本身影响。建议先在一个空闲标签页中测试,再在你要诊断的页面或应用运行时重复测试。

常见问题

不一样。这个计数器测量的是浏览器接收 requestAnimationFrame 回调的频率。它适合检查网页动画和页面流畅度,但不是面向本地游戏的完整 GPU 跑分工具。

大多数浏览器会把动画帧与显示器刷新率对齐。60Hz 显示器通常报告约 60 FPS;而 120Hz 或 144Hz 显示器在浏览器和操作系统允许的情况下,可以报出更高的数值。

在 60Hz 下做常规流畅度检查时用 50 FPS 即可。高刷新率显示器则可以把阈值设得更接近你期待的体验,例如 90 FPS 或 120 FPS。

不会。测量全部在你的浏览器中通过本地计时 API 完成。本工具不会把帧数据、屏幕截图或设备信息发送到任何外部 API。

相关工具