2

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

我正在阅读此 [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 记录它们不感兴趣——我需要将它们存储在一个对象中以供进一步使用。

根据这个 [3]链接，一旦工作完成，PerformanceObserver 实例就会被隐式销毁。链接上的结尾评论显示该错误已修复，但绝对不是这种情况。

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

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

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

4

1 回答 1

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”的更多条目。

于 2018-04-04T09:11:04.017 回答