各位观众老爷们，大家好！我是你们的老朋友，bug终结者，今天给大家带来一场关于JavaScript Performance Observer的饕餮盛宴。咱们今天要聊的是如何像一个资深的间谍一样，监听浏览器的各种性能事件，然后把这些数据偷偷地收集起来，为我们的网页优化提供弹药。
开场白：性能，永远的痛
各位，你们有没有遇到过这样的场景：辛辛苦苦写出来的网页，在自己的电脑上跑得飞起，结果到了用户那里，卡得跟PPT似的？用户体验直接跌到谷底，老板的脸色比锅底还黑？
别慌，这不是你的错，也不是用户的电脑太烂。这往往是因为我们对网页的性能监控不够。我们就像盲人摸象，只知道网页慢，却不知道慢在哪里，更不知道该如何优化。
Performance Observer，就是我们手里的放大镜，可以让我们清晰地看到网页性能的每一个细节。
第一幕：什么是 Performance Observer？
简单来说，Performance Observer 就是一个观察者，它就像一个监听器，可以监听浏览器中发生的各种性能事件。当有符合我们要求的性能事件发生时，它就会通知我们，并把相关的数据传递给我们。
可以把 Performance Observer 想象成一个性能监控小弟，你告诉它你想知道什么（比如首次渲染时间），一旦小弟发现有符合条件的事情发生，它就会立刻跑来汇报。
第二幕： Performance Observer 的基本用法
要使用 Performance Observer，我们需要经过以下几个步骤：
- 创建一个
PerformanceObserver实例： 告诉小弟你想监听什么。 - 定义一个回调函数： 告诉小弟，发现情况后怎么处理。
- 启动观察： 让小弟开始工作。
- （可选）停止观察： 如果不再需要监听，就让小弟休息一下。
下面是一个简单的例子，演示如何监听 first-input (首次输入延迟) 事件：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log("首次输入延迟：", entry.processingStart - entry.startTime, "ms");
});
});
observer.observe({ type: "first-input", buffered: true });
// buffered: true 表示获取浏览器已经发生的事件，而不是只监听未来的事件代码解释：
new PerformanceObserver((list) => { ... })：创建了一个PerformanceObserver实例，并定义了一个回调函数。回调函数接收一个PerformanceObserverEntryList对象，包含了所有符合条件的性能事件。list.getEntries().forEach((entry) => { ... })：遍历PerformanceObserverEntryList对象，获取每一个PerformanceEntry对象。PerformanceEntry对象包含了性能事件的详细信息。console.log("首次输入延迟：", entry.processingStart - entry.startTime, "ms");：计算首次输入延迟，并打印到控制台。observer.observe({ type: "first-input", buffered: true });：启动观察，指定要监听的事件类型为first-input，并设置buffered为true，表示获取浏览器已经发生的first-input事件。
第三幕：PerformanceObserver 的参数详解
PerformanceObserver 的 observe() 方法接收一个配置对象，这个配置对象可以指定我们要监听的事件类型、是否获取已经发生的事件等。
配置对象的主要参数如下：
| 参数 | 类型 | 描述 |
| ————- | —— | ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————– ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— “`
第四幕：PerformanceEntry 的属性
PerformanceEntry 对象包含了性能事件的详细信息，不同的事件类型包含的属性也不同。以下是一些常用的属性：
| 属性 | 类型 | 描述 |
|---|---|---|
name |
String | 事件的名称，例如 ‘documentLoad’ |
entryType |
String | 事件的类型，例如 ‘measure’ |
startTime |
Number | 事件开始的时间戳（相对于performance.timeOrigin） |
duration |
Number | 事件持续的时间（毫秒） |
processingStart |
Number | 事件处理开始的时间戳（相对于performance.timeOrigin） |
processingEnd |
Number | 事件处理结束的时间戳（相对于performance.timeOrigin） |
sources |
Array | 资源数组(ResourceType) |
第五幕：PerformanceObserver 的实际应用
PerformanceObserver 可以用于监控各种性能指标，例如：
- 页面加载时间： 使用
navigation事件类型，可以获取页面的加载时间、DNS 查询时间、TCP 连接时间、请求响应时间等。 - 资源加载时间： 使用
resource事件类型，可以获取图片、CSS、JavaScript 等资源的加载时间。 - 自定义性能指标： 使用
mark和measure事件类型，可以自定义性能指标，例如某个函数的执行时间。 - 长任务（Long Task）： 使用
longtask事件类型，可以检测阻塞主线程的长任务。 - 布局偏移（Layout Shift）： 使用
layout-shift事件类型，可以检测页面中发生的布局偏移。
下面是一些具体的例子：
- 监听资源加载时间：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(
"资源加载时间：",
entry.name,
entry.duration,
"ms",
entry.initiatorType
);
});
});
observer.observe({ type: "resource", buffered: true });- 监听长任务：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log("长任务：", entry.name, entry.duration, "ms");
});
});
observer.observe({ type: "longtask", buffered: true });- 监听布局偏移：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log("布局偏移：", entry.value);
});
});
observer.observe({ type: "layout-shift", buffered: true });- 自定义性能指标：
performance.mark("start");
// 执行一些代码
for (let i = 0; i < 1000000; i++) {
// 模拟耗时操作
}
performance.mark("end");
performance.measure("myMeasure", "start", "end");
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log("自定义指标：", entry.name, entry.duration, "ms");
});
});
observer.observe({ type: "measure", buffered: true });第六幕：停止观察
当我们不再需要监听某个事件时，可以使用 observer.disconnect() 方法停止观察。这样可以避免不必要的性能开销。
observer.disconnect();第七幕：PerformanceObserver 的兼容性
PerformanceObserver 的兼容性非常好，几乎所有现代浏览器都支持它。但是，为了兼容一些老旧的浏览器，我们可以使用 polyfill。
第八幕：最佳实践
- 只监听必要的事件： 不要监听所有事件，只监听你关心的事件，避免不必要的性能开销。
- 及时停止观察： 当你不再需要监听某个事件时，及时停止观察，释放资源。
- 使用
buffered: true： 如果你需要获取浏览器已经发生的事件，设置buffered为true。 - 避免在回调函数中执行耗时操作： 回调函数应该尽可能地简单，避免执行耗时操作，否则会影响性能。
- 合理使用自定义指标： 自定义指标可以帮助我们监控特定的性能问题，但是不要滥用，避免过度优化。
第九幕：进阶技巧
- 使用
PerformanceObserver.supportedEntryTypes获取支持的事件类型： 可以使用PerformanceObserver.supportedEntryTypes属性获取浏览器支持的事件类型，避免监听不支持的事件。
console.log(PerformanceObserver.supportedEntryTypes); // 输出一个数组，包含所有支持的事件类型- 结合后端服务进行数据分析： 可以将
PerformanceObserver收集到的数据发送到后端服务进行分析，从而更好地了解网页的性能状况。
总结：性能优化，永无止境
Performance Observer 是一个强大的性能监控工具，可以帮助我们发现网页的性能瓶颈，并进行优化。但是，性能优化是一个持续的过程，需要我们不断地学习和实践。希望今天的分享能够帮助大家更好地理解和使用 Performance Observer，打造更流畅、更快速的网页体验！
好了，今天的讲座就到这里，感谢各位的观看！ 记住，优化代码一时爽，一直优化一直爽！如果你们在性能优化的道路上遇到任何问题，欢迎随时来找我，bug终结者，永远是你们最坚实的后盾！