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 获取帧数据
调用 window.performance.getEntriesByType('frame') 可获取已记录的帧条目数组。每个条目包含：
- startTime：该帧开始渲染的高精度时间戳（单位毫秒，相对 navigationStart）
- duration：该帧从开始到提交完成的总耗时（含构建、布局、绘制、合成）
- isMainFrame：是否为主文档帧（可过滤掉 iframe 内部帧干扰）
注意：该 API 不会自动持续采集，需在动画活跃期主动轮询或监听帧变化。推荐配合 requestAnimationFrame 触发采集，例如：
function collectFrameStats() {
const frames = performance.getEntriesByType('frame').filter(f => f.isMainFrame);
if (frames.length >= 2) {
const last = frames[frames.length - 1];
const prev = frames[frames.length - 2];
const frameInterval = last.startTime - prev.startTime;
const fps = Math.round(1000 / frameInterval);
console.log(`当前帧间隔 ${frameInterval.toFixed(1)}ms → ${fps} FPS`);
}
}
requestAnimationFrame(collectFrameStats);识别性能瓶颈的关键帧指标
单看 FPS 数值容易误判。Frame Timing API 的真正价值在于拆解每帧内部耗时，定位卡顿根源：
- duration > 16.7ms：表示该帧未达 60fps 目标，需进一步分析子阶段
- 若连续多帧 duration 突增，但
startTime间隔稳定，说明是渲染管线某环节（如 JS 执行或样式计算）突发阻塞 - 若
startTime间隔大幅拉长（如跳到 40ms），则可能是主线程被长时间任务抢占，导致帧被丢弃
结合 DevTools 验证与补全
Frame Timing API 数据需与 Chrome DevTools 的 Performance 面板交叉验证：
- 录制动画过程，在火焰图中查找与高
duration帧对应的时间点，直接看到 JS 调用栈、Layout/Update Layer Tree、Paint 等耗时分布 - 开启 “Screenshots” 选项，可逐帧查看实际渲染画面，确认是否因视觉复杂度（如大量 SVG、CSS filter）引发 raster 任务超时
- 注意：DevTools 中的 FPS meter 显示的是合成线程帧率，而 Frame Timing API 默认反映主线程主导帧；两者差异大时，说明存在主线程与合成线程不同步问题（如 JS 阻塞导致合成器只能复用旧帧）
优化方向要匹配帧耗时构成
拿到具体帧的 duration 和 DevTools 分析后，按典型瓶颈选择对策：
-
JS 执行过长：将 heavy computation 移至 Web Worker；用
setTimeout或queueMicrotask拆分任务；避免在 rAF 回调中做深度遍历或同步 DOM 查询 -
样式计算或 Layout 频繁：减少强制同步布局（如读取 offsetTop 后立即修改 class）；用
will-change: transform提升动画元素；避免在循环中连续修改多个样式属性 -
Raster（光栅化）耗时高：简化 canvas 绘制逻辑；压缩大尺寸背景图；避免在动画中频繁切换
opacity或transform触发全层重绘
