在 JS 中扩展 PerformanceObserver 的范围

Question

PerformanceObserver [1] 接口用于显示 Web 性能指标，例如 First Paint (FP) 和 First Contextual Paint (FCP)。目前处于“候选推荐状态”。

我正在阅读this [2] 链接，该链接显示了以下用于在控制台中显示 FP 和 FCP 的代码：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // `entry` is a PerformanceEntry instance.
     console.log(entry.entryType);
     console.log(entry.startTime); // DOMHighResTimeStamp
     console.log(entry.duration); // DOMHighResTimeStamp
   }
 });

 // Start observing the entry types you care about (in this case, paint)
 observer.observe({entryTypes: ['paint']});
 // observer object is destroyed here.

问题出现了 - 我对从控制台读取值或通过 Analytics 记录它们不感兴趣 - 我需要将它们存储在一个对象中以供进一步使用。

根据this [3] 链接，PerformanceObserver 实例在作业完成后立即被隐式销毁。链接上的结尾 cmets 表明该错误已修复，但事实并非如此。

虽然这行很有趣（在第三个链接中，开始评论） -

目前，如果性能观察者实例没有在 JS 中显式保持活动状态（例如，通过附加到窗口或长寿命对象）

这意味着实例可以附加到 window 或任何长期存在的对象以扩展其范围/生命周期。这是怎么做到的？

Answer 1

您可以将条目存储在全局数组中以供以后使用

const globalPerfArray = [];
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        globalPerfArray.push(entry);
    }
});

如果您只是“绘画”的观察者

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

然后您将在页面加载后获得两个条目“first-paint”和“first-contentful-paint”。由于这是页面加载事件，因此不会再记录类型“paint”的更多条目。