请说明在前端开发中，如何测量和计算 CSS 动画的帧率（FPS）？
考察说明
考查对 CSS 动画性能监控的实际操作与原理理解。
回答思路
- 【回答框架 1】FPS（帧每秒）是衡量动画流畅度的核心指标，理想值为 60fps，即每帧约 16.7ms。检测 CSS 动画 FPS 通常通过 requestAnimationFrame 定时器实现：记录每次回调的时间戳，统计 1 秒内回调次数即为瞬时 FPS，或计算连续帧间隔的平均值。
- 【回答框架 2】具体实现时，可在动画元素上开始计数，使用变量 count 累加，并在每秒通过定时器（如 setInterval 1000ms）读取并重置计数器。注意 requestAnimationFrame 在页面不可见时会暂停，因此测量需在页面可见状态下进行。
- 【回答框架 3】更精细的测量可借助 DevTools 的 Performance 面板或 fps-meter 之类的库，但基础原理与 requestAnimationFrame 一致。此外，辅助检测可观察动画是否出现卡顿，如帧间隔突增超过 50ms 则可能掉帧。
- 【回答框架 4】测量时应区分 `transform` 和 `opacity` 动画与布局属性动画，前者合成器处理，帧率更稳定；后者可能触发重排，降低 FPS。最终应结合性能工具综合分析。
- 【关键点 1】使用 requestAnimationFrame 回调计数作为 FPS 测量的基本方法。
- 【关键点 2】FPS 理想值为 60，低于 30 通常视为明显卡顿。
- 【关键点 3】优先使用 transform 和 opacity 实现动画以获得更好的合成性能。
- 【易错点 1】requestAnimationFrame 在页面隐藏时不触发，可能造成统计偏差，需注意测量条件。
- 【易错点 2】不能仅依赖 FPS 数值判断体验，还需结合帧时间稳定性。