巧用Performance Observer，洞察Web性能！

前端

2023-12-26 17:48:36

前言

在追求用户体验至上的今天，Web性能已成为网站运营和优化的重中之重。如何全面、高效地监测Web性能，成为了前端开发工程师面临的一大课题。

传统的前端性能监测方案往往采用自定义埋点的形式，存在耗时耗力、覆盖面窄、精准度不高等弊端。而浏览器原生支持的Performance Observer API，则为我们提供了全新的视角和技术手段。

Performance Observer简介

Performance Observer是W3C制定的一套API，用于观察和测量浏览器的性能。它允许开发者在页面生命周期的不同阶段注册监听器，捕获和记录各种性能指标。

Performance Observer具有以下特点：

内置且全面： Performance Observer是浏览器原生支持的API，无需引入第三方库即可使用。它覆盖了页面加载、资源加载、DOM渲染等多个阶段，提供了全面的性能监测能力。
低开销： Performance Observer采用异步监听机制，不会阻塞主线程。它只会在性能事件发生时触发，对页面性能影响极小。
可定制： 开发者可以根据需要选择不同的性能指标进行监听，并自定义处理回调函数。这使得Performance Observer具有很强的灵活性。

Performance Observer使用方法

使用Performance Observer非常简单。首先，你需要在页面加载时注册一个观察器，指定要监听的性能事件。然后，在观察器回调函数中处理捕获到的性能指标数据。

// 注册Performance Observer监听器
const observer = new PerformanceObserver((list) => {
  // 处理performanceEntries
});

// 监听页面加载事件
observer.observe({ entryTypes: ['navigation'] });

Performance Observer支持监听多种性能事件，常见的事件类型包括：

navigation：页面加载相关事件
resource：资源加载相关事件
longtask：长时间运行的任务
paint：页面渲染相关事件
interaction：用户交互相关事件

Performance Observer的应用场景

Performance Observer在Web性能监测中的应用场景非常广泛，包括：

页面加载性能分析： 监测页面加载时间、重定向次数、DNS解析时间等指标，分析页面加载过程中的性能瓶颈。
资源加载性能分析： 监测资源加载时间、类型、大小等指标，找出影响页面加载速度的资源。
用户交互性能分析： 监测用户点击、滚动、拖拽等交互操作的响应时间，分析用户操作的流畅度。
自定义性能指标监测： 开发者可以根据业务需求，自定义需要监测的性能指标，例如自定义错误监控、首屏加载时间等。

案例：利用Performance Observer分析页面加载性能

接下来，我们通过一个案例来演示如何利用Performance Observer分析页面加载性能。

// 监听页面加载事件
const observer = new PerformanceObserver((list) => {
  const navigationEntry = list.getEntriesByType('navigation')[0];
  console.log(`页面加载时间：${navigationEntry.loadEventEnd - navigationEntry.loadEventStart}ms`);
  console.log(`重定向次数：${navigationEntry.redirectCount}`);
  console.log(`DNS解析时间：${navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart}ms`);
});

// 开始监听
observer.observe({ entryTypes: ['navigation'] });