使用PerformanceObserver与Playwright时页面刷新重复捕获指标的解决问询

我正在使用PerformanceObserver API结合PlayWright捕获应用中的多项性能指标。我的应用在点击按钮/链接时会生成多个浏览器实例：FCP、LCP、TTFB这类指标会在页面首次导航时被捕获，而LongTask和CLS这类指标会在页面刷新时更新。

例如，登录应用后，我已捕获首页的FCP、LCP和TTFB指标。点击首页的链接会打开新浏览器窗口，在该页面填写信息并点击Finish按钮后，首页会刷新。此时再次获取首页指标时，除LongTask和CLS外，其余指标值均未变化。请问这种情况下，如何避免重复捕获无变化的指标？

我在PlayWright中创建了用于捕获指标的fixture，以下是在页面打开或关闭时调用的函数内代码：

const perfMetrics = new PerformanceMetrics(page.mainFrame());
const pageLevelTotalBlockingTime = await perfMetrics.totalBlockingTime(transactionName);
const pagePaintTiming = await perfMetrics.paintTiming(transactionName);
const pageLevelLargeContentfulPaint = await perfMetrics.largestContentfulPaint(transactionName);
const pageNavigationTime = await perfMetrics.navigationTime(transactionName);
const resourceTiming = await perfMetrics.resourceTime(transactionName);
const pageLevelCLS = await perfMetrics.cumulativeShift(transactionName)

1. 给页面实例维护指标缓存 #

在PerformanceMetrics类内部添加缓存逻辑，针对首次导航后不会变化的指标（如FCP、LCP、TTFB），捕获一次后就直接返回缓存值：

class PerformanceMetrics {
  constructor(frame) {
    this.frame = frame;
    // 只缓存静态指标
    this.cachedStaticMetrics = {
      paintTiming: null,
      largestContentfulPaint: null,
      navigationTime: null
    };
  }

  async paintTiming(transactionName) {
    if (this.cachedStaticMetrics.paintTiming) {
      return this.cachedStaticMetrics.paintTiming;
    }
    // 执行捕获逻辑
    const metrics = await this.frame.evaluate(() => {
      return performance.getEntriesByType('paint').find(entry => entry.name === 'first-contentful-paint');
    });
    this.cachedStaticMetrics.paintTiming = { transactionName, metrics };
    return this.cachedStaticMetrics.paintTiming;
  }

  // 同理实现LCP、TTFB等静态指标的缓存逻辑
}

2. 区分页面导航类型 #

通过Playwright的页面事件判断当前是首次导航还是刷新，针对性捕获指标：

// 在fixture中维护页面导航状态
let isFirstNavigation = true;

page.on('framenavigated', async (frame) => {
  if (frame !== page.mainFrame()) return;
  
  const perfMetrics = new PerformanceMetrics(frame);
  const transactionName = 'your-transaction-name';

  if (isFirstNavigation) {
    // 首次导航才捕获静态指标
    await perfMetrics.paintTiming(transactionName);
    await perfMetrics.largestContentfulPaint(transactionName);
    await perfMetrics.navigationTime(transactionName);
    isFirstNavigation = false;
  }
  
  // 每次导航/刷新都捕获动态更新的指标
  await perfMetrics.totalBlockingTime(transactionName);
  await perfMetrics.cumulativeShift(transactionName);
  // 资源时序可根据实际情况判断是否需要重复捕获
  await perfMetrics.resourceTime(transactionName);
});

3. 对比指标值再存储 #

如果不想依赖导航状态，可在捕获后对比已有值，仅当值变化或首次捕获时记录：

// 维护全局或页面级的指标存储
const storedMetrics = {};

async function captureMetrics(page, transactionName) {
  const perfMetrics = new PerformanceMetrics(page.mainFrame());
  
  // 处理静态指标：仅首次或值变化时存储
  const paintTiming = await perfMetrics.paintTiming(transactionName);
  const prevPaint = storedMetrics[transactionName]?.paintTiming;
  if (!prevPaint || JSON.stringify(prevPaint) !== JSON.stringify(paintTiming)) {
    storedMetrics[transactionName] = { ...storedMetrics[transactionName], paintTiming };
  }

  // 动态指标：每次都更新
  const cls = await perfMetrics.cumulativeShift(transactionName);
  storedMetrics[transactionName] = { ...storedMetrics[transactionName], cls };
  
  const totalBlockingTime = await perfMetrics.totalBlockingTime(transactionName);
  storedMetrics[transactionName] = { ...storedMetrics[transactionName], totalBlockingTime };
}

4. 利用PerformanceObserver的一次性监听特性 #

对于只会触发一次的性能事件（如FCP），捕获到后直接断开观察者，避免重复监听：

async function captureFCP(frame) {
  return new Promise((resolve) => {
    const observer = new PerformanceObserver((list) => {
      const entry = list.getEntriesByName('first-contentful-paint')[0];
      if (entry) {
        resolve(entry.startTime);
        observer.disconnect(); // 捕获后立即停止监听
      }
    });
    observer.observe({ entryTypes: ['paint'] });
  });
}

内容的提问来源于stack exchange，提问作者harsha.cs