js 浏览器的5种observer 第四种 PerformanceObserver 详解及使用方法-526互联

在前端性能分析领域，了解和监控网页的运行性能至关重要。PerformanceObserver API 为我们提供了一个强大的工具来监听性能时间线上的事件，从而实现更细粒度的性能监控。

PerformanceObserver 是一种浏览器提供的接口，允许我们订阅性能时间线上的特定类型事件。当与 Performance API 结合使用时，它提供了一个全面的性能监控解决方案。

如何使用 PerformanceObserver?

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry);
    }
});
observer.observe({ entryTypes: ['paint', 'measure'] });

// 上述代码中，我们创建了一个新的 PerformanceObserver 实例，并开始监听'paint'和'measure'类型的性能条目。

应用场景

以下是一些常见的使用 PerformanceObserver 的场景：

1. 首次内容绘制 (FCP): 监控页面首次渲染的时间，帮助了解页面加载速度。

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

2. 自定义性能度量: 使用 `performance.mark()` 和 `performance.measure()` 标记和测量自定义的时间点。

performance.mark('customStart');
// ... some code ...
performance.mark('customEnd');
performance.measure('customMeasure', 'customStart', 'customEnd');
observer.observe({ entryTypes: ['measure'] });