performance api 是观测页面真实运行节奏的工具，核心是减少抖动、避免突发卡顿；需用 performanceobserver 捕获帧耗时、监听 longtask、避开强制同步布局、轻量监控异常帧并用标准差验证节奏稳定性。
Performance API 不是用来“加功能”的，而是帮你看清页面真实运行节奏的显微镜。提升稳定性，核心是减少抖动、避免突发卡顿，而不是追求平均帧率多高。
用 PerformanceObserver 捕获真实动画帧耗时
动画是否稳定，不能只看“有没有60fps”，要看每一帧是否按时落地：
- 在每次
requestAnimationFrame开头调用performance.now()记录起始时间 - 在样式更新（如修改
transform）完成后再次采样，差值即该帧真实耗时 - 超过 16.7ms 就是潜在卡顿帧；连续 3 帧超 50ms 或单帧超 100ms，应主动标记并上报
- 搭配监听
longtask类型，确认 JS 长任务是否抢占了渲染时机
避开静默渲染瓶颈：聚焦可合成属性与强制同步布局
多数卡顿不是 JS 慢，而是渲染流水线被意外打断：
- 动画只用
transform和opacity；禁用filter（如blur()），它会让元素退回到 CPU 渲染 - 避免在 rAF 中读取
offsetTop、getBoundingClientRect()等触发回流的属性 - 尤其警惕“读-改-读-改”交替操作，极易引发强制同步布局（Layout）
- 用
performance.getEntriesByType('paint')查看 FP/FCP/LCP 时间点，判断动画是否被首屏资源阻塞
上线后轻量监控异常帧并分层归因
生产环境不追求全量数据，但必须保留对异常的感知能力：
- 只监听
['paint', 'longtask', 'first-input']三类条目，避免性能反噬 - 上报时附带关键设备信息：
navigator.hardwareConcurrency（逻辑核数）、screen.width、devicePixelRatio - 按设备分组对比帧耗时分布：若仅在 2 核低端机上高频出现 >80ms 帧，说明优化重点应在 JS 任务拆分，而非压缩图片
- 将异常帧时间戳与自定义标记（如
performance.mark('anim-start')）对齐，还原用户操作上下文
用标准差验证节奏是否真正平稳
改完代码后，别只看平均帧率——60fps 平均值掩盖不了忽高忽低的抖动：
- 录制一段典型动画过程，导出 JSON 后分析帧时间标准差：>3ms 就说明节奏不稳
- 检查 LCP 元素是否随动画触发重绘：若 LCP 时间在动画开始后明显后移，说明动画引发了非预期的布局或绘制
- 对比优化前后帧耗时分布图，重点关注尾部（95% 分位以上）是否明显左移
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
