Performance API 是浏览器原生 RUM 核心工具，支持获取导航指标（如 TTFB、白屏时间、TTI、完全加载耗时）、分析慢资源、自定义打点测量及监听渲染/交互指标（FP/FCP/LCP/FID），数据可用 sendBeacon 可靠上报。
Performance API 是浏览器原生提供的高性能监控工具，能实时采集真实用户场景下的关键指标，不依赖插件、不影响运行时性能。它不是开发阶段的辅助工具，而是生产环境 RUM（Real User Monitoring）的核心能力。
抓取页面加载核心指标
通过 performance.getEntriesByType('navigation') 获取单页完整加载时间线，可计算出多个影响用户体验的关键值：
-
TTFB（首字节时间）：反映后端响应速度，计算方式为
responseStart - requestStart -
白屏时间：从导航开始到 DOM 开始解析，用
domLoading - navigationStart -
可交互时间（TTI）近似值：参考
domInteractive - fetchStart，结合长任务分析更准确 -
完全加载耗时：用
loadEventEnd - navigationStart，注意该值受第三方脚本阻塞影响较大
定位慢资源与异常请求
资源加载是前端性能波动最常见原因。调用 performance.getEntriesByType('resource') 可逐个检查 JS、CSS、图片、字体等资源：
- 筛选加载耗时超 800ms 的资源：
entry.duration > 800 - 关注
initiatorType字段识别资源来源（如script、img、xmlhttprequest） - 检查
transferSize和encodedBodySize，发现未压缩或体积过大的资源 - 对
nextHopProtocol为http/1.1的资源，可推动升级 HTTP/2 或 HTTP/3
标记业务关键路径并测量耗时
使用 performance.mark() 和 performance.measure() 在代码中埋点，适配 SPA 路由切换、搜索响应、表单提交等场景：
- 在路由跳转前打点：
performance.mark('route-start') - 在组件挂载完成时再打点：
performance.mark('route-end') - 生成测量记录：
performance.measure('navigate-home', 'route-start', 'route-end') - 后续通过
performance.getEntriesByType('measure')提取数据，支持按名称过滤
监听渲染与交互类核心指标
借助 PerformanceObserver 异步监听，避免阻塞主线程，适合长期运行的监控逻辑：
- 监听首次绘制（FP）和首次内容绘制（FCP）：
entryTypes: ['paint'] - 捕获最大内容绘制（LCP）：
entryTypes: ['largest-contentful-paint'] - 监测首次输入延迟（FID）：
entryTypes: ['first-input']（注意：仅在用户真实触发后才上报） - 每监听到新条目，立即提取
entry.startTime和entry.name，用于聚合分析
采集到的数据建议用 navigator.sendBeacon() 上报，确保页面卸载前可靠发送。不需要复杂 SDK，几行代码就能构建轻量、稳定、覆盖全生命周期的性能监控链路。
