526互联

js PerformanceObserver 浏览器各项指标监测

发布时间 2023-09-14 01:38:14作者: 完美前端

 

# PerformanceObserver: 深入了解前端性能监测 前端开发中，性能监测是一个重要的环节。为了更好地理解用户的实际体验，我们需要了解和监测网站的性能。`PerformanceObserver` 是 Web 性能 API 的一部分，用于监测性能指标。本文将详细介绍 `PerformanceObserver` 的使用方法和应用场景。

1. 什么是 PerformanceObserver？

PerformanceObserver 是一个浏览器 API，允许开发者监听特定的性能时间线事件。当与 PerformanceTimeline 结合使用时，它提供了一个强大的工具，可以实时监测和分析应用程序的性能。

2. 如何使用 PerformanceObserver

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

上述代码会创建一个新的 `PerformanceObserver` 实例，并监听 mark 和 measure 事件。一旦这些事件发生，回调函数就会被触发，并打印出相关的性能条目。

3. PerformanceObserver 的应用场景 监测资源加载时间

const resourceObserver = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.initiatorType === 'img') {
            console.log(`Image ${entry.name} loaded in ${entry.duration}ms`);
        }
    }
});
resourceObserver.observe({ entryTypes: ['resource'] });
这个例子展示了如何使用 `PerformanceObserver` 来监测图片资源的加载时间。

监测首次内容绘制 (FCP)

const fcpObserver = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.name === 'first-contentful-paint') {
            console.log(`First contentful paint occurred at ${entry.startTime}ms`);
        }
    }
});
fcpObserver.observe({ entryTypes: ['paint'] });

在这个例子中，我们监测了首次内容绘制 (FCP) 的时间。

 

## 4. 更多资源 想要更深入地了解 PerformanceObserver 和其他相关的性能监测工具，可以访问以下链接：

- MDN PerformanceObserver 文档

- Observing your app with user timings

 

## 结论

PerformanceObserver 提供了一个强大的工具，用于监测和分析网站的性能。利用这个工具，开发者可以更好地了解用户的体验，并优化应用程序。