HTML5 `Performance Observer`：实时监听性能指标的变化

HTML5 Performance Observer：当你的代码开始“唠叨”性能问题

各位前端的小伙伴们，有没有遇到过这样的情况：辛辛苦苦写了一堆代码，上线之后，用户反馈说页面卡顿得像在泥潭里挣扎，而你却对着控制台挠破头皮也找不到问题所在？别慌，今天我们就来聊聊一个能让你的代码“主动”告诉你哪里出了问题的神器——HTML5 Performance Observer。

想象一下，你的代码突然有了“意识”，它不再默默承受性能的折磨，而是开始像一个尽职尽责的性能监控员一样，实时向你汇报各种性能指标的变化，是不是感觉很酷？这就是Performance Observer能做到的。

告别“事后诸葛亮”，拥抱“实时监控”

在没有Performance Observer之前，我们想要了解页面的性能，通常只能通过以下几种方式：

手动测量： 在代码的关键位置埋点，记录时间戳，然后手动计算时间差。这种方式费时费力，而且容易出错。
使用浏览器开发者工具： 开发者工具可以提供一些性能分析数据，但只能在特定时间点进行分析，无法实时监控。
使用第三方性能监控工具： 这些工具通常需要付费，而且可能会引入额外的性能开销。

这些方法都有一个共同的缺点：都是“事后诸葛亮”。也就是说，只有在问题发生之后，我们才能知道。而Performance Observer则可以让我们在问题发生的第一时间就感知到，从而更快地定位和解决问题。

Performance Observer：你的专属性能“小喇叭”

Performance Observer，顾名思义，是一个“性能观察者”。它可以监听特定的性能事件，并在这些事件发生时触发回调函数。我们可以通过回调函数来处理这些性能数据，例如记录日志、发送报警等等。

简单来说，你可以把它想象成一个“小喇叭”，它一直盯着页面上的各种性能指标，一旦发现有任何异常，就会立刻向你发出“警告”。

如何召唤你的“小喇叭”？

使用Performance Observer非常简单，只需要几个步骤：

创建一个PerformanceObserver实例：
```
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    // 在这里处理性能数据
    console.log(entry.name, entry.duration);
  });
});
```
这段代码创建了一个PerformanceObserver实例，并定义了一个回调函数。当观察到的性能事件发生时，回调函数会被触发。list.getEntries()方法可以获取到所有观察到的性能条目。
指定要观察的性能事件类型：
```
observer.observe({ entryTypes: ['paint', 'resource'] });
```
observe()方法用于指定要观察的性能事件类型。entryTypes是一个数组，可以包含以下几种类型：
- 'navigation': 页面导航事件，例如页面加载、重定向等。
- 'resource': 资源加载事件，例如图片、CSS、JS等。
- 'paint': 渲染事件，例如首次渲染、首次内容渲染等。
- 'longtask': 长任务事件，指的是执行时间超过50ms的任务。
- 'mark': 自定义标记事件，可以用于在代码中标记关键时间点。
- 'measure': 自定义测量事件，可以用于测量代码块的执行时间。
- 'event'：用户交互事件，例如点击、滚动等。
- 'layout-shift'：布局偏移事件，页面元素位置发生意外变化。
通过指定不同的entryTypes，我们可以监听不同类型的性能事件。
开始观察：

上面的代码已经完成了PerformanceObserver的创建和配置，现在只需要执行observer.observe()方法，就可以开始观察指定的性能事件了。

让我们来玩点实际的：监听资源加载时间

举个例子，假设我们想要监听页面上所有图片的加载时间，可以使用以下代码：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.initiatorType === 'img') {
      console.log(`图片 ${entry.name} 加载时间：${entry.duration} ms`);
    }
  });
});

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

这段代码会监听所有resource类型的事件，然后在回调函数中判断initiatorType是否为img，如果是，则输出图片的名称和加载时间。

你可以在页面上添加一些图片，然后刷新页面，在控制台中就可以看到图片的加载时间了。

监听长任务：揪出“罪魁祸首”

长任务是指执行时间超过50ms的任务。长时间运行的任务会阻塞主线程，导致页面卡顿。使用Performance Observer可以很容易地监听长任务，并找出导致页面卡顿的“罪魁祸首”。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.warn(`发现长任务：${entry.name}，持续时间：${entry.duration} ms`);
    console.warn("长任务的起始时间：", entry.startTime);
    console.warn("长任务的结束时间：", entry.startTime + entry.duration);
    // 可以将长任务的信息发送到服务器，以便进行进一步的分析
  });
});

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

这段代码会监听所有longtask类型的事件，并在回调函数中输出长任务的名称和持续时间。你可以通过分析这些长任务，找出导致页面卡顿的原因。

监听布局偏移：避免“惊吓”

布局偏移是指页面元素的位置发生意外变化。布局偏移会给用户带来不好的体验，例如用户在点击一个按钮时，按钮突然移动到其他位置，导致用户点击失败。

使用Performance Observer可以监听布局偏移事件，并及时修复这些问题。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.warn(`发现布局偏移：${entry.name}，贡献分数为：${entry.value}`);
    console.warn("布局偏移的起始时间：", entry.startTime);
    console.warn("布局偏移的结束时间：", entry.startTime + entry.duration);
    // 可以将布局偏移的信息发送到服务器，以便进行进一步的分析
  });
});

observer.observe({ type: 'layout-shift', buffered: true });

这段代码会监听所有layout-shift类型的事件，并在回调函数中输出布局偏移的名称和贡献分数。贡献分数越高，说明布局偏移对用户体验的影响越大。

buffered: true 表示即使在观察者创建之前发生的布局偏移事件也会被捕获。

Performance Observer 的进阶玩法：自定义指标

除了监听预定义的性能事件类型之外，Performance Observer还允许我们创建自定义的性能指标。这对于测量特定代码块的执行时间非常有用。

使用performance.mark()标记关键时间点：
```
performance.mark('start');

// 执行一些代码

performance.mark('end');
```
performance.mark()方法用于在代码中标记关键时间点。
使用performance.measure()测量代码块的执行时间：
```
performance.measure('my-task', 'start', 'end');
```
performance.measure()方法用于测量代码块的执行时间。第一个参数是测量名称，第二个参数是起始标记的名称，第三个参数是结束标记的名称。

监听measure类型的事件：

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'measure') {
      console.log(`任务 ${entry.name} 执行时间：${entry.duration} ms`);
    }
  });
});

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

这段代码会监听所有measure类型的事件，并在回调函数中输出任务的名称和执行时间。

Performance Observer 的注意事项

性能开销： 虽然Performance Observer可以帮助我们监控性能，但它本身也会带来一定的性能开销。因此，在使用Performance Observer时，应该尽量减少观察的事件类型，并避免在回调函数中执行耗时操作。
兼容性： Performance Observer的兼容性良好，几乎所有主流浏览器都支持它。但是，为了兼容旧版本的浏览器，可以使用polyfill。
不要滥用： Performance Observer是一个强大的工具，但不要滥用它。只观察真正需要监控的性能事件，并避免过度优化。

总结

Performance Observer是一个强大的性能监控工具，它可以帮助我们实时了解页面的性能状况，并及时发现和解决性能问题。通过合理地使用Performance Observer，我们可以打造出更加流畅、高效的用户体验。

希望这篇文章能够帮助你更好地理解和使用Performance Observer。下次你的代码再“闹脾气”的时候，记得用Performance Observer这个“小喇叭”来听听它到底在抱怨什么哦！祝各位前端开发者都能写出性能卓越的代码，告别卡顿，拥抱丝滑！