FPS 计数器
用这个 FPS 计数器测量浏览器渲染当前页面是否流畅。它通过 requestAnimationFrame 采样帧,报告当前、平均、最低和最高帧率,还能绘制一张简短图表,帮你找出因标签页占用过高、动画、扩展程序、性能限制或显示设置而出现的掉帧。
如何测量浏览器帧率
-
1
选择采样时长
5 秒是不错的默认值。若想捕捉周期性卡顿或后台负载变化,可延长采样时间。
-
2
设置平滑与警告阈值
平滑窗口会对最近的帧取平均值,阈值则标出你认为该测试设备可以接受的帧率水平。
-
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。
相关工具
BBCode 转 HTML 转换器
将 BBCode(论坛标记)转换为干净的 HTML。支持格式标签、列表、引用、代码、图片、链接和表格。
Base64 转 Hex 转换器
将 Base64 字符串转换为其底层字节的十六进制表示。适合检查令牌、密钥、证书和 JWT。
HEX 颜色选择器
通过可视化方式选择颜色,并获取 HEX、RGB、HSL、HSV、CMYK 值以及黑白背景下的对比度。
ASCII 转二进制转换器
将任意 ASCII 字符串转换为二进制表示。每个字符变成八位,以空格分隔,可直接粘贴到协议跟踪或作业中。
二进制转十六进制转换器
将二进制输入转换为纯大写十六进制值。非 0 和 1 字符会被忽略,前导零不会保留。
ASCII 转 Hex 转换器
将 ASCII 文本转换为 hexadecimal byte values。输出每个字符两个 hex digits,可用于 memory dumps、packet traces 或 firmware tables。