JavaScript资源监控_PerformanceObserver使用-js教程-PHP中文网

JavaScript资源监控_PerformanceObserver使用

幻影之瞳

发布： 2025-11-22 09:20:02

原创

126人浏览过

PerformanceObserver是用于实时监听页面性能数据的API，相比performance.getEntries()更灵活，适合监控动态资源加载、异步操作等场景。它通过订阅entryType（如resource、paint、longtask、navigation）来捕获性能条目，可在回调中处理资源加载耗时、绘制时间等信息。例如监听'resource'类型可追踪脚本、图片等静态资源的加载过程，结合FP、FCP、长任务等指标分析性能瓶颈。使用时需提前初始化、指定entryTypes、避免重复创建实例，并在生产环境添加错误处理。对于持续性性能监控，尤其SPA或懒加载应用，PerformanceObserver优于传统一次性获取方式，是构建前端监控体系的重要工具。

javascript资源监控_performanceobserver使用

前端性能优化离不开对关键指标的准确采集，而 PerformanceObserver 是现代浏览器提供的一个强大 API，能让你实时监听和收集页面性能数据。相比传统的 performance.getEntries() 一次性获取，它更灵活，适合监控动态加载资源、异步操作或长期运行的应用。

什么是 PerformanceObserver？

PerformanceObserver 允许你订阅浏览器性能条目（performance entries）的生成过程。当有新的性能记录产生时（如资源加载完成、重绘、长任务等），回调函数会被触发，你可以立即处理这些数据。

它支持监听多种 entryType，常见的包括：

resource：监控脚本、图片、CSS 等资源加载情况
paint：获取首次渲染（FP）和首次内容绘制（FCP）时间
longtask：识别主线程长时间阻塞的任务
navigation：监听页面加载整体耗时（需单独配置）

如何监控资源加载性能？

通过监听 entryType: 'resource'，可以捕获每个资源从请求到加载完成的全过程。下面是一个实际例子：

立即学习“Java免费学习笔记（深入）”；

Safe Exam Browser

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 或懒加载场景。