LIVE HUD / 浏览器绘制节奏

帧率计数器

一句话说清用途：点一下就知道这台设备刷得顺不顺。实时统计 FPS、1% Low、帧时间曲线 与 掉帧次数，可调动画负载与测试时长，结果自动留档对比；纯本地测量，不上传数据。

测的是 requestAnimationFrame 绘制节奏，不等于游戏内帧率；上限通常为显示器刷新率。

FRAME RATE待机

--FPS

目标60 FPS

负载中 · 40 块

已采样0 帧

实时帧时间曲线

时长 0.0 s · 最近 240 帧

帧时间 ms16.7 ms（60 FPS 基准）33.3 ms（卡顿线）

测试设置

对比时请固定同一档位

动画负载

测试时长

目标帧率判定

统计结果

尚未开始测试

历史成绩与导出

最近 6 次 · 保存在本机

CSV 对特殊字符做转义，包含每帧毫秒数与统计摘要。

#	时间	负载 / 时长	平均 FPS	1% Low	卡顿帧	评级
完成一次测试后，成绩会自动记录在这里。

📈统计口径与判读方法平均 FPS、1% Low 与卡顿线怎么算

测量对象	requestAnimationFrame 相邻回调的时间差，即当前标签页的浏览器绘制节奏；不是游戏内帧率，也不是显卡跑分。
1% Low 口径	把最慢的 1% 帧取出来求平均帧时间，再换算成每秒帧数；比平均 FPS 更能反映偶发卡顿。样本不足 100 帧时按向上取整至少取 1 帧。
卡顿线	帧时间 >33.3 ms 记为卡顿帧（低于 30 FPS），>50 ms 记为严重长帧；两条参考线画在曲线上，便于目检。
负载档位	轻 12 / 中 40 / 重 90 个运动方块，用 transform 位移驱动；负载越重越容易暴露掉帧，对比时请固定同一档。
时长与前台	可选 10 / 30 / 60 秒或不限时；浏览器会节流后台标签页，测量时请保持窗口在前台，不要最小化。
记录与导出	最近 6 次成绩写入本机 localStorage；CSV 含每帧毫秒数、瞬时 FPS 与统计摘要，特殊字符已转义。

这个工具解决什么问题

平均 FPS 好看，不代表用起来不顿。这个计分板同时给 平均 FPS、1% Low、帧时间曲线、卡顿帧数量，还能调动画负载与测试时长，把「偶尔卡一下」这件事量化出来。测完自动留档，方便在同一台设备上做前后对比；加载页面不会自动开跑，也不会弹任何窗口。

四条测量原则

先固定条件：同一档负载、同一时长、同样前台状态，成绩才有可比性。
看 1% Low 而不只看平均：平均值容易被大量流畅帧拉高，长帧才决定手感。
上限常是刷新率：系统若设为 60Hz，网页测不出 144 FPS，先去显示设置里核对。
别拿它当游戏跑分：本页只反映浏览器绘制节奏，游戏内帧率还受 GPU 与引擎影响。

按这几步用

设置负载与时长：在测试设置里选轻 / 中 / 重三档方块数量，选 10 / 30 / 60 秒或不限时，再选目标帧率。
开始采样：点首屏「开始测试」，HUD 表盘与曲线实时刷新；可随时暂停、继续或重置。
观察曲线：看帧时间是否越过 16.7 ms 基准线与 33.3 ms 卡顿线，尖峰密集说明存在长帧。
读统计与判定：到点自动结算，给出平均、1% Low、中位数、最高最低、卡顿帧数与文字判定。
对比历史：最近 6 次成绩自动进入历史表，比较同一档位下的 1% Low 是否改善。
导出数据：点「导出本次帧时间 CSV」拿到逐帧数据与统计摘要，可用表格软件画自己的图。

小提示

「载入示例曲线」用一组固定数据演示图表读法，会标注为示例成绩，不代表这台设备的实测结果；真实测量请点「开始测试」。

更新记录

v1.0 2026-11-11 工具上线：rAF 实时采样、帧时间曲线与 16.7/33.3 ms 参考线、1% Low 与中位数统计、三档动画负载、四档时长、暂停/重置、最近 6 次历史对比、逐帧 CSV 转义导出与示例曲线。

常见问题

网页测出来的 FPS 等于游戏帧率吗？

不等于。本页测的是浏览器 requestAnimationFrame 的绘制节奏，反映的是当前标签页的渲染能力，上限通常是显示器刷新率；游戏帧率还取决于 GPU、驱动与游戏本身。可用于排查浏览器卡顿与屏幕刷新率，不是游戏内跑分。

1% Low 是什么意思？

把最慢的 1% 帧取出来算平均帧时间，再换算成每秒帧数。它比平均 FPS 更能反映偶发卡顿：平均值可能很好看，但 1% Low 很低就说明会时不时顿一下。本页按这个口径计算并标出卡顿帧数量。

为什么测出来是 60 而不是 144？

浏览器绘制节奏受显示器刷新率、系统省电策略、后台标签页节流与浏览器垂直同步共同限制。想测高刷需要确认系统显示设置已切到高刷新率，并保持本标签页处于前台、不要最小化窗口。

动画负载档位影响结果吗？

会。轻、中、重三档分别绘制 12、40、90 个运动方块，负载越重越容易暴露掉帧。做设备对比时请固定同一档位、同一时长，再比平均 FPS 与 1% Low。

历史成绩会上传到服务器吗？

不会。最近 6 次测试只写入当前浏览器的 localStorage，CSV 也是本地生成的文件。清除站点数据后记录会消失，其它设备看不到这些成绩。

页面刚打开会自动开始测试吗？

不会。页面加载后只显示空表盘与操作入口，点「开始测试」或「载入示例曲线」才产生数据，不会在加载时弹出任何窗口，也不会在后台偷偷占用 CPU。

暂停后继续会丢样本吗？

不会。暂停时保留已采样帧，继续时重置上一帧时间戳再接着采，避免把暂停时长算成一次超长帧；重置则会清空本次全部样本。

曲线为什么只显示最近 240 帧？

为了让折线在窄屏上仍可读，图表只绘制最近 240 帧；统计与导出的 CSV 仍使用本次全部采样帧，不受显示窗口限制。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！