关键词：PerformanceObserver api 使用

PerformanceObserver API 是一个强大的浏览器接口，允许开发者订阅性能相关的事件，实时收集和分析用户当前浏览器会话中的性能数据。这个 API 是 Web 性能监测工具箱的一部分，与 window.performance 对象紧密协作，后者提供了对网页性能数据的访问。PerformanceObserver 允许应用异步监听性能测量事件，而不需要定时检查 window.performance 的条目。

核心功能

• 实时性能数据收集：随着网页生命周期中各种事件的触发，PerformanceObserver 支持实时捕获和处理性能数据条目。
• 减少资源消耗：与轮询 window.performance 对象相比，使用 PerformanceObserver 可以降低资源消耗，并提供更及时的数据收集。
• 灵活的数据订阅模型：可以指定订阅一个或多个特定类型的性能条目，根据需要接收相关数据。

主要方法

• observe()：开始观察一个或多个特定类型的性能条目。通过指定条目类型，应用可以订阅感兴趣的性能事件。
• disconnect()：停止观察性能数据。这可以释放相关资源，并停止进一步的回调执行。

使用示例

下面的例子展示了如何使用 PerformanceObserver 来监听首次内容绘制 (First Contentful Paint, FCP) 和最大内容绘制 (Largest Contentful Paint, LCP) 的性能指标。

const perfObserver = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (entry.name === "first-contentful-paint") {
      console.log("FCP:", entry.startTime);
    } else if (entry.name === "largest-contentful-paint") {
      console.log("LCP:", entry.startTime);
    }
  }
});

perfObserver.observe({ type: "paint", buffered: true });

在这个例子中，perfObserver 被配置为监听包含 FCP 和 LCP 的 paint 类型的性能条目。当这些指标被记录到性能时间线上时，回调函数将被执行，并可以对这些数据进行进一步的处理，比如打印在控制台或发送到服务器。

注意事项

• PerformanceObserver API 的支持程度取决于浏览器和浏览器版本。为了最好地利用这一 API，推荐检查目标用户群体最常用浏览器的兼容性。
• 合理使用 disconnect() 方法来停止数据的观察（特别是在单页应用中或在不再需要收集数据时）有助于保持应用的性能。
• buffered 选项允许接收到观察者激活之前已经记录的性能条目，这在页面加载阶段尤其有用。

通过 PerformanceObserver，开发者可以精细控制性能数据的收集过程，有效监控和分析网页性能，从而提升用户体验。