PerformanceObserver是用于实时监听页面性能数据的API，相比performance.getEntries()更灵活，适合监控动态资源加载、异步操作等场景。它通过订阅entryType（如resource、paint、longtask、navigation）来捕获性能条目，可在回调中处理资源加载耗时、绘制时间等信息。例如监听'resource'类型可追踪脚本、图片等静态资源的加载过程，结合FP、FCP、长任务等指标分析性能瓶颈。使用时需提前初始化、指定entryTypes、避免重复创建实例，并在生产环境添加错误处理。对于持续性性能监控，尤其SPA或懒加载应用，PerformanceObserver优于传统一次性获取方式，是构建前端监控体系的重要工具。
前端性能优化离不开对关键指标的准确采集，而 PerformanceObserver 是现代浏览器提供的一个强大 API，能让你实时监听和收集页面性能数据。相比传统的 performance.getEntries() 一次性获取，它更灵活，适合监控动态加载资源、异步操作或长期运行的应用。
什么是 PerformanceObserver？
PerformanceObserver 允许你订阅浏览器性能条目（performance entries）的生成过程。当有新的性能记录产生时（如资源加载完成、重绘、长任务等），回调函数会被触发，你可以立即处理这些数据。
它支持监听多种 entryType，常见的包括：
- resource：监控脚本、图片、CSS 等资源加载情况
- paint：获取首次渲染（FP）和首次内容绘制（FCP）时间
- longtask：识别主线程长时间阻塞的任务
- navigation：监听页面加载整体耗时（需单独配置）
如何监控资源加载性能？
通过监听 entryType: 'resource'，可以捕获每个资源从请求到加载完成的全过程。下面是一个实际例子：
立即学习“Java免费学习笔记（深入）”；
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
// 只关注静态资源
if (entry.entryType === 'resource') {
console.log('资源:', entry.name);
console.log('开始时间:', entry.startTime.toFixed(2));
console.log('加载耗时:', entry.duration.toFixed(2) + 'ms');
console.log('HTTP状态:', entry.responseStatus);
// 可以上报到服务器做分析
// analytics.track('resource-load', {
// url: entry.name,
// duration: entry.duration,
// status: entry.responseStatus
// });
}
});
});
// 开始监听资源类型条目
observer.observe({ entryTypes: ['resource'] });
这样，所有后续动态加载的 JS、图片、字体等都会被自动捕获，非常适合 SPA 或懒加载场景。
注意点与最佳实践
使用 PerformanceObserver 时有几个关键细节要留意：
- 必须在 observe() 中明确指定要监听的 entryTypes，否则不会收到数据
- 建议尽早初始化 observer，避免错过早期资源加载事件
- 对于需要跨页面保留的数据，可结合 Navigation Timing API 使用
- 生产环境记得做 try-catch 包裹，防止上报逻辑影响主流程
- 不要频繁创建 observer 实例，复用更高效
如果只想获取一次页面整体信息，仍可用 performance.getEntriesByType('resource') 配合 window.onload 使用。但若要实现持续、细粒度的性能监控，PerformanceObserver 是更优选择。
总结
PerformanceObserver 提供了非侵入式的性能数据流接入方式，特别适合构建前端监控 SDK 或优化用户体验。掌握它，能让你更精准地定位慢资源、分析加载瓶颈。基本上就这些，不复杂但容易忽略细节。
