Performance API是浏览器原生高性能监控接口，支持通过performance.getEntriesByType('navigation')获取导航时间点、resource/paint类型捕获资源与渲染时机，推荐用sendBeacon上报并兼容降级处理。
Performance API 是浏览器原生提供的高性能监控接口，能精准获取页面加载各阶段的毫秒级时间戳，无需第三方库即可分析白屏、首屏、资源加载等关键指标。
获取核心加载时间点
通过 window.performance.timing（旧标准，仍广泛支持）或更现代的 performance.getEntriesByType('navigation') 获取导航性能数据。推荐使用后者，语义清晰且兼容性良好：
- 调用 performance.getEntriesByType('navigation')[0] 获取当前页面导航记录
- 从中提取 startTime（导航开始）、domContentLoadedEventStart（DOM 解析完成）、loadEventStart（load 事件触发）等字段
- 注意：所有时间值均为相对于 performance.timeOrigin 的高精度毫秒数，避免使用 Date.now() 计算差值
监控资源加载与渲染时机
除导航外，Performance API 还可捕获资源加载和绘制事件：
- 用 performance.getEntriesByType('resource') 获取所有脚本、样式、图片等资源的加载耗时
- 结合 performance.getEntriesByType('paint')（需 Chrome 60+ / Firefox 59+）获取 first-paint 和 first-contentful-paint 时间
- 对关键资源（如首屏图片、核心 CSS）可监听其 entry 的 duration 和 transferSize，识别大体积或慢响应问题
上报与轻量聚合建议
监控数据需及时、低开销地上报，避免影响用户体验：
立即学习“Java免费学习笔记（深入）”；
- 使用 sendBeacon() 发送日志，确保页面卸载前也能发出请求
- 对重复访问用户，可采样上报（如 10%），或仅在性能异常时（如 FCP > 3s）触发完整采集
- 前端聚合时优先计算关键百分位（如 p75、p95），比平均值更能反映真实用户感知
注意兼容性与降级处理
并非所有环境都支持全部特性：
- IE 仅支持 timing 对象，不支持 getEntriesByType；Safari 对 paint 类型支持较晚
- 建议先检测 performance.getEntriesByType 是否存在，不存在则回退到 timing 计算逻辑
- 对无 Performance API 的老旧环境（如部分 WebView），可简单用 DOMContentLoaded 和 load 事件打点作为基础兜底
不复杂但容易忽略的是：务必在页面最顶部尽早执行监控代码，避免因脚本延迟导致错过早期时间点。将初始化逻辑放在 <head> 内联 script 中是最稳妥的做法。
