通过PerformanceObserver来统计FP/FCP

PerformanceObserver 是一个用于监控浏览器性能的接口，可以用来收集各种与性能相关的信息。通过 PerformanceObserver，你可以订阅各种性能条目，比如资源加载、用户输入延迟等，并在这些性能条目发生变化时得到通知。

下面是一个简单的示例，展示如何使用 PerformanceObserver 监控页面加载性能：

// 创建一个 PerformanceObserver 实例
const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
        console.log(entry.name + ' ' + entry.duration);
    });
});


// 配置要观察的性能条目类型
observer.observe({ entryTypes: ['navigation'] });

在这个示例中，我们首先创建了一个 PerformanceObserver 实例，然后通过 observe() 方法指定要观察的性能条目类型为 'navigation'，表示我们要监控页面导航相关的性能数据。

当页面加载完成后，PerformanceObserver 会触发回调函数，其中的 list 参数包含了一个 PerformanceEntryList 对象，我们可以通过 list.getEntries() 方法获取到各种性能条目的信息，比如加载时间、资源加载时间等。

你可以根据具体的需求配置不同的 entryTypes，比如 'resource'、'paint' 等，来监控不同类型的性能数据。通过 PerformanceObserver，你可以更加精细地监控页面性能，以便进行性能优化和调试。

FP/FCP

要通过PerformanceObserver来统计首次绘制（First Paint，FP）和首次内容绘制（First Contentful Paint，FCP），可以使用以下步骤：

1、 创建一个新的PerformanceObserver实例，并指定要观察的entryTypes为"paint"。这样可以捕获与绘制相关的性能条目。

2、 在PerformanceObserver的回调函数中，遍历观察到的性能条目（PerformanceEntry对象），并根据条目的name属性来判断是FP还是FCP。

3、 记录FP和FCP的时间戳，可以通过PerformanceEntry对象的startTime属性来获取。

下面是一个简单的示例代码，演示如何使用PerformanceObserver来统计FP和FCP：

// 创建一个新的PerformanceObserver实例
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    if (entry.name === 'first-paint') {
      console.log('First Paint:', entry.startTime);
    } else if (entry.name === 'first-contentful-paint') {
      console.log('First Contentful Paint:', entry.startTime);
    }
  });
});


// 启动PerformanceObserver并指定观察的entryTypes为'paint'
observer.observe({ entryTypes: ['paint'] });

在上面的代码中，我们创建了一个PerformanceObserver实例，指定观察的entryTypes为'paint'，然后在回调函数中判断每个性能条目的name属性，以区分FP和FCP，并打印它们的时间戳。

通过这种方式，你可以使用PerformanceObserver来捕获和统计页面的FP和FCP时间，从而更好地了解页面加载性能。

总结

在使用PerformanceObserver接口监控页面性能时，entryTypes参数用于指定要观察的性能条目类型。这个参数接受一个字符串数组，其中包含要监视的性能条目类型。以下是一些常见的性能条目类型及其用法：

1、 navigation：用于监视导航相关的性能条目，如页面加载时间、重定向次数等。

const observer = new PerformanceObserver((list) => {
       const entries = list.getEntriesByType('navigation');
       entries.forEach(entry => {
           console.log(entry);
       });
   });


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

2、 resource：用于监视页面加载的资源（如图片、脚本、样式表等）的性能条目。

const observer = new PerformanceObserver((list) => {
       const entries = list.getEntriesByType('resource');
       entries.forEach(entry => {
           console.log(entry);
       });
   });


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

3、 paint：用于监视页面绘制相关的性能条目，如首次绘制（FP）、首次内容绘制（FCP）等。

const observer = new PerformanceObserver((list) => {
       const entries = list.getEntriesByType('paint');
       entries.forEach(entry => {
           console.log(entry);
       });
   });


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

4、 longtask：用于监视长任务（Long Tasks）的性能条目，这些任务可能会影响页面的响应性能。

const observer = new PerformanceObserver((list) => {
       const entries = list.getEntriesByType('longtask');
       entries.forEach(entry => {
           console.log(entry);
       });
   });


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

通过指定不同的entryTypes，您可以针对特定类型的性能条目进行监视和分析，从而更好地了解页面加载和性能瓶颈。