在 JS 中扩展 PerformanceObserver 的范围

Question

PerformanceObserver [1] 界面用于显示网络性能指标，例如 First Paint (FP) 和 First Contextual Paint（FCP）。目前在 "Candidate Recommendation Status".

我正在阅读 this [2] link，其中显示了以下用于在控制台中显示 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] link，一旦作业完成，PerformanceObserver 实例就会隐式销毁。 link 的结尾评论显示错误已修复，但事实并非如此。

虽然这一行很有趣（在第三个 link，开始评论）-

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

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

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' 的更多条目，因为这是页面加载事件。

在 JS 中扩展 PerformanceObserver 的范围

Extend scope of PerformanceObserver in JS

javascript

scope

lifetime

web-performance