Performance API可精准监控前端性能。1. Navigation Timing分析页面加载各阶段耗时，计算TTFB、DOM Ready等指标；2. Resource Timing追踪资源加载瓶颈，识别慢资源并分析网络阶段；3. Paint Timing获取FP和FCP，衡量用户可见体验；4. User Timing自定义标记测量关键逻辑执行时间。配合监控上报，可持续优化性能。
前端性能直接影响用户体验，而Performance API是浏览器原生提供的强大工具集，能够精准采集页面加载、资源请求、脚本执行等关键性能数据。通过合理使用这些API，开发者可以实时监控性能表现，定位瓶颈所在。
1. 使用Navigation Timing API分析页面加载全过程
Navigation Timing提供了从用户输入URL到页面完全加载的详细时间戳，是分析首屏性能的核心依据。
-
获取完整加载流程时间：通过
window.performance.getEntriesByType("navigation")获取导航信息，可计算DNS查询、TCP连接、白屏时间、DOM解析等阶段耗时。 -
关注关键指标：如
loadEventEnd - fetchStart表示总加载时间，domContentLoadedEventEnd - responseEnd反映DOM构建效率。 - 示例代码：
const [nav] = performance.getEntriesByType('navigation');
console.log('TTFB:', nav.responseStart - nav.requestStart);
console.log('DOM Ready:', nav.domContentLoadedEventEnd - nav.fetchStart);
console.log('Full Load:', nav.loadEventEnd - nav.fetchStart);2. 利用Resource Timing API追踪资源加载瓶颈
当页面存在大量图片、脚本或第三方资源时，个别资源的延迟会拖累整体性能。
-
识别慢资源：调用
performance.getEntriesByType("resource")获取所有资源加载记录，按duration或responseStart排序找出最耗时项。 -
分析网络阶段耗时：查看每个资源的
connectEnd - connectStart（TCP连接）、responseStart - requestStart（等待时间）等，判断是否为CDN、服务器响应或SSL握手问题。 - 设置监控上报规则：对加载超过1秒的资源进行告警，或统计JS/CSS/图片的平均加载时间趋势。
3. 借助Paint Timing API衡量用户可见体验
用户关心的是何时看到内容，Paint Timing提供首次绘制和首次内容绘制的时间点。
立即学习“前端免费学习笔记（深入）”；
-
获取FMP与FP：使用
performance.getEntriesByName('first-paint')和'first-contentful-paint'获取这两个核心用户体验指标。 -
结合业务埋点：在关键组件渲染完成后手动标记，例如
performance.mark('home-banner-painted')，便于分析特定模块的渲染延迟。 -
注意跨浏览器兼容性：FMP在部分旧浏览器中不可用，需降级使用
DOMContentLoaded作为近似参考。
4. 使用User Timing API自定义性能标记
对于复杂应用，标准指标不足以覆盖所有性能场景，可通过自定义mark和measure来测量特定逻辑块。
-
标记关键执行段：在函数开始处
performance.mark('start-api-call')，结束时performance.mark('end-api-call')，再用measure计算间隔。 - 结构化输出：
performance.mark('login-start');
await login();
performance.mark('login-end');
performance.measure('login-duration', 'login-start', 'login-end');- 收集并上报：将自定义measure结果整合进日志系统，用于分析接口调用、状态更新、动画启动等细分性能。
基本上就这些。Performance API不需要引入额外依赖，配合定期采集和可视化展示，能有效发现前端性能退化点。关键是建立持续监控机制，把数据转化为可行动的优化建议。
