前言

想给自己的博客做一些简单的性能分析，但是一直没找到好的方法，在网上看的方法比较但不统一，让我没安全感。然后就去看了web.dev中他们是怎么写的，在他们推荐的库web-vitals源码中使用到了PerformanceObserver来进行性能观测

正文

PerformanceObserver接口用于观察性能度量事件，并在新的性能条目被记录在浏览器的性能时间轴中时收到通知(触发回调)。

属性和方法

PerformanceObserver()

使用new PerformanceObserver(callback)就可以创建并返回一个PerformanceObserver对象，参数为一个回调函数。当通过observe()注册的性能条目事件触发时，调用回调函数。

entryTypes

作为要观测的性能指标名，可以通过PerformanceObserver.supportedEntryTypes获取，每个字符串代表一个性能指标。如当我要观测FP(first-paint)或FCP(first-contentful-paint)就告诉PerformanceObserver观测"paint"。各个类型的详细解释见MDN。

observe()

指定要观察的类型。当为指定的entryTypes之一记录性能条目时，将调用PerformanceObserver的回调函数。

disconnect()

用于阻止PerformanceObserver接收任何性能事件。相当于removeEventListener

实践

let observer = new PerformanceObserver((entryList) => {
    let perfEntries = entryList.getEntries();
    perfEntries.forEach((entry) => {
        console.log(`${entry.name}: startTime-${entry.startTime},duration-${entry.duration}`);
    });
}).observe({
    entryTypes: PerformanceObserver.supportedEntryTypes,
});

和chrome Performance测试时间是一样的

支持情况

结尾

参考为MDN，web.dev。如有问题欢迎交流，一定积极改正。

PerformanceObserver前端性能测量方法

前言

正文