无需登录 数据私有 本地保存

动画帧率分析器 - requestAnimationFrame 监控

开发工具 性能 动画 帧率 性能 监控
67
0
0
0
流畅运行
60
实时帧率 · FPS
平均 FPS
--
最低 FPS
--
最高 FPS
--
丢帧计数
0
1% Low
--
帧时间
--
FPS 趋势图
60 FPS 参考线 30 FPS 警戒线 实时 FPS
帧时间分布 · 最近帧（绿<16.7ms · 橙16.7-33ms · 红>33ms）
模拟负载 空闲 0%
常见问题与知识点

requestAnimationFrame（rAF） 是浏览器提供的API，用于在下一次屏幕刷新之前执行回调函数。与setInterval不同，rAF会自动匹配显示器的刷新率（通常60Hz=60fps，高刷屏可达120fps或144fps），并且在页面不可见时自动暂停，从而节省CPU和电量。它是创建流畅JavaScript动画的推荐方式。

大多数显示器的刷新率为60Hz，即每秒刷新60次。当动画以60fps运行时，每帧约有16.67ms的预算来完成所有计算和渲染。如果每帧都能在这个预算内完成，动画就会显得丝滑流畅。低于30fps时人眼能明显感知到卡顿。120fps及以上在高刷新率显示器上能提供更流畅的体验，但对性能要求更高。

FPS = 1000 ÷ 帧时间(ms)。例如：16.67ms → 60fps，33.33ms → 30fps，100ms → 10fps。帧时间是衡量单帧耗时的更精确指标——FPS是平均值，而帧时间能揭示帧间波动。即使平均FPS为60，如果偶有帧耗时100ms，用户仍会感到明显卡顿（jank）。这就是为什么监控"1% Low FPS"很重要。

1% Low FPS 是指将所有帧按耗时排序后，最慢的1%帧的平均FPS。它反映了最糟糕情况下的体验。例如，平均FPS为60但1% Low仅为25fps，意味着虽然大部分时间流畅，但每100帧中就有1帧严重卡顿，用户会感受到周期性的"抖动"。游戏和高性能动画通常追求1% Low接近平均FPS。

常见原因包括：① 大量DOM操作（频繁修改布局触发回流）；② 复杂CSS效果（box-shadow、filter、大量动画）；③ JavaScript执行时间过长（同步计算阻塞主线程）；④ 垃圾回收（GC暂停）；⑤ 图片/资源加载阻塞渲染；⑥ 事件监听器过多。使用本工具配合Chrome DevTools Performance面板可以精确定位瓶颈。

关键优化策略：① 使用transform和opacity进行动画（仅触发合成，不触发回流）；② 使用will-change提示浏览器优化；③ 将耗时计算移至Web Worker；④ 使用requestAnimationFrame代替setInterval；⑤ 对DOM读写进行批量处理避免强制同步布局；⑥ 使用虚拟列表处理大量数据；⑦ 利用CSS contain属性限制布局范围。

在120Hz显示器上，requestAnimationFrame理论上可以以120fps运行，每帧预算仅8.33ms——比60fps的预算少了一半。这对性能要求更高。本工具会自动适应显示器刷新率，如果您看到FPS稳定在120左右，说明您的显示器和代码性能都很出色。如果FPS远低于刷新率，说明存在性能瓶颈需要优化。

requestAnimationFrame：与屏幕刷新同步，页面隐藏时自动暂停，帧率匹配显示器，动画更流畅，节能。
setInterval：固定间隔执行，无视屏幕刷新时机，可能造成帧撕裂（在一帧中间更新），页面隐藏时仍运行浪费资源。
推荐：所有视觉动画使用rAF；定时数据轮询等非视觉任务使用setInterval。
🔧 相关工具