如何通过 Frame Timing API（实验性）度量并优化动画的每秒帧数 (FPS)

Frame Timing API 是目前最直接获取真实帧渲染数据的 Web 标准接口，仅在 Chrome 120+/Edge 120+ 默认启用，需前台页面且非沙箱 iframe；它返回每帧 startTime 和 duration 等精确指标，不提供平均 FPS，须自行计算，配合 requestAnimationFrame 轮询使用，并结合 DevTools 定位 JS、Layout、Raster 等瓶颈。 Frame Timing API 是目前最直接获取真实帧渲染数据的 Web 标准接口，但它仍属实验性功能，仅在部分 Chromium 内核浏览器（如 Chrome 120+、Edge 120+）中默认启用，且需用户主动开启实验标志或满足特定条件（如页面处于前台、非 iframe 沙箱环境）。它不提供“平均 FPS”数字，而是返回每帧的精确时间戳与耗时，需自行计算——这恰恰是它比 FPS 计数器更可靠的原因。 如何用 Frame Timing API 获取帧数据 调用 可获取已记录的帧条目数组。每个条目包含： startTime ：该帧开始渲染的高精度时间戳（单位毫秒，相对 navigationStart） duration ：该帧从开始到提交完成的总耗时（含构建、布局、绘制、合成） isMainFrame ：是否为主文档帧（可过滤掉 iframe 内部帧干扰） 注意：该 API 不会自动持续采集，需在动画活跃期主动轮询或监听帧变化。推荐配合 触发采集，例如： 识别性能瓶颈的关键帧指标 单看 FPS 数值容易误判。Frame Timing API 的真正价值在于拆解每帧内部耗时，定位卡顿根源： 稿定在线PS PS软件网页版 下载 duration > 16.7ms ：表示该帧未达 60f ps 目标，需进一步分析子阶段 若连续多帧 duration 突增 ，但 间隔稳定，说明是渲染管线某环节（如 JS 执行或样式计算）突发阻塞 若 间隔大幅拉长（如跳到 40ms），则可能是主线程被长时间任务抢占，导致帧被丢弃 结合 DevTools 验证与补全 Frame Timing API 数据需与 Chrome DevTools 的 Performance 面板交叉验证： 录制动画过程，在火焰图中查找与高 帧对应的时间点，直接看到 JS 调用栈、Layout/Update Layer Tree、Paint 等耗时分布 开启 “Screenshots” 选项，可逐帧查看实际渲染画面，确认是否因视觉复杂度（如大量 SVG、CSS filter）引发 raster 任务超时 注意：DevTools 中的 FPS meter 显示的是合成线程帧率，而 Frame Timing API 默认反映主线程主导帧；两者差异大时，说明存在主线程与合成线程不同步问题（如 JS 阻塞导致合成器只能复用旧帧） 优化方向要匹配帧耗时构成 拿到具体帧的 和 DevTools 分析后，按典型瓶颈选择对策： JS 执行过长 ：将 heavy computation 移至 Web Worker；用 或 拆分任务；避免在 rAF 回调中做深度遍历或同步 DOM 查询 样式计算或 Layout 频繁 ：减少强制同步布局（如读取 offsetTop 后立即修改 class）；用 提升动画元素；避免在循环中连续修改多个样式属性 Raster（光栅化）耗时高 ：简化 canvas 绘制逻辑；压缩大尺寸背景图；避免在动画中频繁切换 或 触发全层重绘