requestAnimationFrame 监控器 - 实时 FPS 与帧时间

requestAnimationFrame (RAF) 是浏览器提供的一个API，用于在下次屏幕刷新之前执行指定的回调函数。它是创建流畅动画的首选方式，因为浏览器会根据屏幕的刷新率（通常为60Hz，即每秒60次）自动调度回调，避免不必要的计算和掉帧。相比 setTimeout 或 setInterval，RAF能更好地与浏览器的渲染管道同步，提供更平滑的动画体验。

FPS（Frames Per Second）即每秒帧数，表示屏幕每秒刷新的画面数量。

• ≥ 55 FPS：流畅，用户体验极佳
• 30-54 FPS：尚可接受，但可能出现轻微卡顿感
• < 30 FPS：明显卡顿，用户体验较差

大多数显示器以60Hz刷新，因此60 FPS是流畅动画的黄金标准。高刷新率显示器（120Hz、144Hz）可以达到更高的帧率。

帧时间是指浏览器完成一帧渲染所需的时间，通常以毫秒（ms）为单位。它与FPS的关系是：FPS = 1000 / 帧时间。

帧时间比FPS更能反映性能的稳定性。例如，两段动画的平均FPS都是60，但其中一段偶尔出现100ms的帧时间尖峰（对应10 FPS的瞬间卡顿），用户体验会明显更差。监控帧时间的波动和尖峰是诊断性能问题的关键。

1%低帧是指将所有帧时间从大到小排序后，取第99百分位对应的帧率。它代表了最差1%帧的性能表现。

这个指标非常重要，因为平均FPS可能掩盖间歇性的性能问题。如果1%低帧远低于平均FPS，说明页面存在偶发的卡顿尖峰，这比持续低帧率更影响用户体验。游戏和动画类应用尤其关注此指标。

优化帧率的常见策略包括：

• 减少重绘和重排：使用CSS Transform和Opacity实现动画，避免修改布局属性
• 使用will-change提示：告知浏览器哪些元素即将变化
• 降低动画复杂度：简化DOM结构，减少动画元素数量
• 使用Web Worker：将计算密集型任务移出主线程
• 合理使用节流和防抖：减少高频事件的处理频率
• 图片优化：使用合适尺寸和格式的图片资源

• RAF：与屏幕刷新率同步，自动适配设备刷新率；页面不可见时自动暂停，节省资源；帧时间稳定，动画更流畅
• setTimeout：不受屏幕刷新率约束，即使页面不可见也会继续执行（部分浏览器会节流）；帧时间不稳定，可能造成动画抖动或过度绘制

对于视觉动画，始终推荐使用RAF。