javascript - 在 JS 中扩展 PerformanceObserver 的范围

Question

PerformanceObserver [1]界面用于显示网络性能指标，例如 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 实例就会被隐式销毁。链接上的结尾评论显示错误已修复，但事实并非如此。

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

Currently if a Performance observer instance is not explicitly kept alive in JS (eg. by attaching to window or long lived object)

这意味着该实例可以附加到窗口 或任何长期存在的对象以延长其作用域/生命周期。这是怎么做到的？

Answer 1

您可以将条目存储在一个全局数组中以备后用

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

如果你只是'paint'的观察者

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

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