Performance API可监控页面加载、资源请求和自定义性能指标。通过Navigation Timing获取TTFB、白屏时间；Resource Timing分析慢资源；User Timing标记业务逻辑耗时；PerformanceObserver异步监听LCP等核心指标，助力构建前端监控体系。
前端性能直接影响用户体验，而浏览器提供的 Performance API 是进行性能监控的核心工具。它能帮助开发者获取页面加载、资源请求、脚本执行等关键时间点的数据，进而分析瓶颈并优化体验。
1. 获取页面加载性能数据（Navigation Timing）
通过 performance.timing 和 performance.getEntriesByType('navigation') 可以获取完整的页面导航和加载过程。
推荐使用更现代的 Navigation Timing Level 2 接口，因为它基于 PerformanceObserver，支持更细粒度的时间采集。
- 获取首字节时间（TTFB）：反映网络请求和服务器响应速度
- 计算白屏时间：从开始到 domLoading 的间隔
- 获取可交互时间（domInteractive）和完全加载时间（loadEventEnd）
示例代码：
立即学习“前端免费学习笔记（深入）”；
const navPerf = performance.getEntriesByType('navigation')[0];
console.log('TTFB:', navPerf.responseStart - navPerf.requestStart);
console.log('DOM Ready:', navPerf.domContentLoadedEventEnd - navPerf.fetchStart);
console.log('Full Load:', navPerf.loadEventEnd - navPerf.fetchStart);
2. 监控资源加载性能（Resource Timing）
利用 performance.getEntriesByType('resource') 可监控图片、脚本、样式表等静态资源的加载情况。
可用于识别加载慢或失败的资源，辅助优化打包策略和 CDN 配置。
- 分析资源从 DNS 查询到传输完成的全过程耗时
- 识别大体积或高延迟资源
- 结合 initiatorType 判断资源类型（如 script、img）
示例：找出加载时间超过 500ms 的资源
const resources = performance.getEntriesByType('resource');
resources.forEach(res => {
const loadTime = res.responseEnd - res.startTime;
if (loadTime > 500) {
console.warn(`Slow resource: ${res.name}, Time: ${loadTime}ms`);
}
});
3. 记录自定义性能指标（User Timing）
使用 performance.mark() 和 performance.measure() 标记关键业务节点，比如搜索响应时间、组件渲染完成等。
适合监控 SPA 中的路由切换、接口响应、动画启动等非标准生命周期事件。
- 在关键逻辑前打上 mark('start-search')
- 结束后打上 mark('end-search')
- 用 measure('search-duration', 'start-search', 'end-search') 计算耗时
这些数据可上报至监控系统，长期追踪功能性能变化。
4. 使用 PerformanceObserver 监听实时性能事件
PerformanceObserver 能异步监听新生成的性能条目，避免阻塞主线程，是现代性能监控的最佳实践。
特别适用于持续收集 LCP、FID、CLS 等 Core Web Vitals 指标。
示例：监听 LCP
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP:', entry.startTime);
// 可以上报到服务端
}
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
基本上就这些。合理使用 Performance API 能精准定位性能问题，结合上报机制可构建完整的前端监控体系。关键是选择合适的时间指标，并持续跟踪变化趋势。不复杂但容易忽略细节。
