Performance API 是唯一零侵入高精度监控渲染耗时的原生方案，通过 PerformanceObserver 捕获 FP/FCP，结合 User Timing 手动打点追踪 Patch 耗时，并采样上报关键指标。
生产环境监控渲染耗时，核心是捕获真实用户视角下的关键视觉变化节点，而非依赖模拟或开发工具。Performance API 是唯一无需注入、零侵入、高精度的原生方案，特别适合追踪 Patch（如 React/Vue 的局部更新）这类细粒度重渲染行为。
捕获首屏与内容绘制时间
首屏渲染体验由 FP（First Paint）和 FCP（First Contentful Paint）定义，它们直接反映页面“开始出内容”和“出现有意义内容”的时刻：
- 使用 PerformanceObserver 监听
paint类型条目，确保在页面早期注册（建议 script 放 head 内且加async或defer） - FCP 时间戳即
entry.startTime，单位毫秒，相对performance.timeOrigin - 注意 Safari 15.4+、Firefox 59+、Chrome 60+ 才完整支持
paint；旧版本可降级用domContentLoadedEventStart作粗略替代
追踪 Patch 渲染耗时（如 React 更新）
Patch 不是浏览器标准事件，需结合框架生命周期 + User Timing 手动打点。以 React 为例，在关键更新前后插入性能标记：
- 在
useEffect或componentDidUpdate开始处调用performance.mark('patch-start') - 在 DOM 确实完成更新后（可用
requestIdleCallback或setTimeout(..., 0)微任务后）调用performance.mark('patch-end') - 立即执行
performance.measure('patch-duration', 'patch-start', 'patch-end') - 后续通过
performance.getEntriesByName('patch-duration')提取duration值
上报策略与轻量聚合
渲染指标波动大，全量上报既冗余又影响性能，应聚焦有效信号：
- 仅对 首屏 FCP、LCP、自定义 patch-duration 这三类指标做采样上报（如 5% 用户）
- 当单次 patch 耗时 > 100ms 或 FCP > 2s 时，触发全量采集并附加上下文（如路由、设备类型、网络类型）
- 使用
navigator.sendBeacon()上报，避免卸载丢失；数据体控制在 1KB 内，只传name、startTime、duration、type字段
兼容性与兜底处理
不是所有环境都支持现代 Performance API：
- 检测
PerformanceObserver和getEntriesByType('paint')是否可用，不可用则跳过 paint 监控 - 对无
mark/measure的老旧 WebView（如部分 Android 4.x），回退到performance.now()手动计时 - 始终在页面最顶部尽早执行监控初始化代码，防止错过首帧渲染时机
