请解释如何使用 Performance Observer API 监控性能指标？

推荐答案

// www.javascriptcn.com code example
// 创建 PerformanceObserver 实例
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(entry.name, entry.duration);
  });
});

// 指定要观察的性能条目类型
observer.observe({ entryTypes: ['resource', 'navigation', 'paint'] });

本题详细解读

Performance Observer API 简介

Performance Observer API 是用于监控性能指标的现代 API，它允许开发者以编程方式观察和收集与性能相关的数据。与传统的 PerformanceTiming 和 PerformanceNavigationTiming 相比，Performance Observer API 提供了更灵活的方式来监控性能指标。

使用步骤

1. 创建 PerformanceObserver 实例：通过 new PerformanceObserver(callback) 创建一个新的 PerformanceObserver 实例。callback 是一个回调函数，当观察到新的性能条目时会被调用。

2. 指定观察的性能条目类型：通过 observer.observe({ entryTypes: [...] }) 方法指定要观察的性能条目类型。常见的条目类型包括：

   • 'resource'：监控资源加载时间（如图片、脚本、样式表等）。
   • 'navigation'：监控页面导航时间。
   • 'paint'：监控首次绘制（First Paint）和首次内容绘制（First Contentful Paint）时间。

3. 处理性能条目：在回调函数中，通过 list.getEntries() 获取所有观察到的性能条目。每个条目都包含有关性能的详细信息，如 name（资源名称）和 duration（持续时间）。

示例代码

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(entry.name, entry.duration);
  });
});

observer.observe({ entryTypes: ['resource', 'navigation', 'paint'] });

注意事项

• 兼容性：Performance Observer API 在现代浏览器中得到广泛支持，但在某些旧版浏览器中可能不可用。
• 性能影响：虽然 Performance Observer API 提供了强大的功能，但过度使用可能会对页面性能产生负面影响。因此，建议仅在需要时使用，并在不再需要时调用 observer.disconnect() 停止观察。