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 指标。
监听 largest-contentful-paint 获取最大内容绘制时间捕获 layout-shift 计算累积布局偏移配合 entry.buffered 获取历史条目
示例：监听 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 能精准定位性能问题，结合上报机制可构建完整的前端监控体系。关键是选择合适的时间指标，并持续跟踪变化趋势。不复杂但容易忽略细节。
以上就是如何利用Performance API进行前端性能监控与分析？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522698.html
微信扫一扫 
支付宝扫一扫 
