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实例。链接上的结束评论显示错误是固定的，但绝对不是这样。

虽然这条线很有意义（在第三个链接中，开始评论） -

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

表示实例可以附加到 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的范围

1 个答案: