各位观众老爷，大家好！今天咱们来聊聊 Performance Observer API，这可是个宝贝，能让咱们像福尔摩斯一样，精确追踪网页的各种性能问题，特别是那些让人头疼的 Long Tasks、Layout Shifts (CLS) 和 Largest Contentful Paint (LCP)。
开场白：性能优化，咱们不能靠感觉
作为前端工程师，咱们经常听到“性能优化”这四个字，仿佛它像个神秘的咒语，能让网站飞起来。但问题是，优化不能靠感觉啊！不能说我觉得这个地方慢了，就随便改两行代码，万一改错了呢？或者改了之后，到底有没有效果呢？
这时候，Performance Observer API 就派上大用场了。它能像一个尽职尽责的监控器，默默地观察着网页的各种性能指标，一旦发现问题，立刻向我们报告。有了它，咱们就能有的放矢地进行优化，而不是像无头苍蝇一样乱撞。
Performance Observer API：咱们的性能侦察兵
Performance Observer API 的核心思想是“观察者模式”。咱们先创建一个观察者，告诉它我们想观察哪些性能事件，然后它就会像一个忠实的侦察兵，时刻监听这些事件，并在事件发生时通知我们。
1. 创建观察者：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
// 在这里处理性能事件
console.log(entry);
});
});这段代码创建了一个 PerformanceObserver 实例，并传入一个回调函数。当观察到的性能事件发生时，回调函数会被执行。list.getEntries() 方法会返回一个包含所有观察到的性能事件的数组，咱们可以遍历这个数组，获取每个事件的详细信息。
2. 告诉观察者要观察什么：
observer.observe({ type: 'long-task', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });
observer.observe({ type: 'largest-contentful-paint', buffered: true });observer.observe() 方法用于告诉观察者要观察哪些性能事件。type 属性指定了要观察的事件类型，buffered 属性指定是否要观察之前已经发生的事件。
long-task: 长任务，指执行时间超过 50ms 的任务。layout-shift: 布局偏移，指页面上元素的布局发生了意外的改变。largest-contentful-paint: 最大内容渲染，指页面上最大的内容元素渲染完成的时间。
Long Tasks：揪出那些卡顿元凶
Long Tasks 是指执行时间超过 50ms 的任务。这些任务会阻塞主线程，导致页面卡顿，影响用户体验。
为什么 Long Tasks 会导致卡顿？
想象一下，你的浏览器是个厨师，主线程就是他的厨房。如果他一直在做一个复杂的菜（Long Task），其他的菜（比如用户点击事件）就只能排队等着。如果等待时间太长，用户就会觉得页面卡住了。
如何使用 Performance Observer API 监控 Long Tasks？
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('Long Task Duration:', entry.duration, 'ms');
console.log('Long Task Start Time:', entry.startTime);
console.log('Long Task Attribution:', entry.attribution); // 显示哪个脚本或元素导致了长任务
});
});
observer.observe({ type: 'long-task', buffered: true });这段代码会监听 long-task 事件，并在控制台输出每个长任务的持续时间、开始时间和归属信息。通过这些信息，咱们就能找到导致卡顿的罪魁祸首。
示例：
假设控制台输出了以下信息：
Long Task Duration: 120 ms
Long Task Start Time: 1000 ms
Long Task Attribution: [
{
name: 'https://example.com/script.js',
entryType: 'script',
startTime: 1000 ms,
duration: 120 ms,
...
}
]这说明 https://example.com/script.js 这个脚本导致了一个持续时间为 120ms 的长任务，开始时间是 1000ms。咱们就可以去检查这个脚本，看看有没有可以优化的地方。
常见 Long Tasks 的原因及优化方法：
| 原因 | 优化方法 |
|---|---|
| 大量的 JavaScript 计算 | 1. 使用 Web Workers 将计算任务转移到后台线程。 2. 优化算法，减少计算量。 3. 使用 requestAnimationFrame 将任务分解成小块，避免长时间阻塞主线程。 |
| 大量的 DOM 操作 | 1. 尽量减少 DOM 操作。 2. 使用 DocumentFragment 批量更新 DOM。 3. 避免频繁地修改 DOM 样式。 |
| 同步加载大型 JavaScript 文件 | 1. 使用代码分割，将大型 JavaScript 文件拆分成多个小文件。 2. 使用延迟加载，只在需要时才加载 JavaScript 文件。 3. 使用 CDN 加速 JavaScript 文件的加载。 |
| 第三方脚本 | 1. 评估第三方脚本的性能影响，只使用必要的脚本。 2. 使用异步加载第三方脚本。 3. 将第三方脚本放在页面底部加载。 |
Layout Shifts (CLS)：消灭那些闪烁幽灵
Layout Shifts (CLS) 是指页面上元素的布局发生了意外的改变。这会导致用户在浏览网页时，突然发现页面上的元素跳动了一下，影响用户体验。
为什么 Layout Shifts 会让人不爽？
想象一下，你正准备点击一个按钮，结果按钮突然往下跳了一下，你点到了旁边的广告，是不是很崩溃？Layout Shifts 就像一个调皮的幽灵，时不时地出来捣乱，让人防不胜防。
如何使用 Performance Observer API 监控 Layout Shifts？
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (!entry.hadRecentInput) { // 忽略用户主动触发的布局偏移
console.log('Layout Shift Value:', entry.value);
console.log('Layout Shift Sources:', entry.sources); // 显示哪些元素导致了布局偏移
}
});
});
observer.observe({ type: 'layout-shift', buffered: true });这段代码会监听 layout-shift 事件，并在控制台输出每个布局偏移的值和来源。entry.value 表示布局偏移的程度，entry.sources 表示导致布局偏移的元素。hadRecentInput 表示布局偏移是否是由用户主动触发的，如果是，则忽略该事件。
示例：
假设控制台输出了以下信息：
Layout Shift Value: 0.15
Layout Shift Sources: [
{
node: <img src="https://example.com/image.jpg">,
previousRect: {
x: 100,
y: 200,
width: 300,
height: 200
},
currentRect: {
x: 100,
y: 250,
width: 300,
height: 200
}
}
]这说明 https://example.com/image.jpg 这张图片导致了一个布局偏移，偏移值为 0.15。图片的原始位置是 (100, 200)，偏移后的位置是 (100, 250)。咱们就可以去检查这张图片，看看是不是没有设置尺寸，导致图片加载后改变了页面的布局。
常见 Layout Shifts 的原因及优化方法：
| 原因 | 优化方法 |
|---|---|
| 没有设置尺寸的图片或视频 | 1. 为图片和视频设置 width 和 height 属性。 2. 使用 srcset 属性提供不同尺寸的图片，让浏览器选择最合适的图片。 3. 使用 aspect-ratio 属性保持图片或视频的宽高比。 |
| 动态插入的内容 | 1. 提前预留空间，避免动态插入的内容改变页面的布局。 2. 使用骨架屏，在内容加载完成前显示占位符。 3. 使用 CSS transform 属性进行动画，避免触发布局。 |
| 没有设置尺寸的广告 | 1. 为广告容器设置固定的尺寸。 2. 使用异步加载广告，避免阻塞页面的渲染。 |
| 字体加载引起的闪烁 (FOIT/FOUT) | 1. 使用 font-display: swap; 属性，在字体加载完成后再显示文本。 2. 使用 preload 预加载字体。 3. 使用 Web Font Loader 等工具控制字体加载。 |
Largest Contentful Paint (LCP)：关注用户最先看到的内容
Largest Contentful Paint (LCP) 是指页面上最大的内容元素渲染完成的时间。LCP 是衡量页面加载速度的一个重要指标，它反映了用户最先看到的内容的加载速度。
为什么 LCP 这么重要？
想象一下，你打开一个网页，结果半天都看不到任何内容，是不是很着急？LCP 就像一个开场白，如果开场白太慢，用户可能就直接关掉网页了。
如何使用 Performance Observer API 监控 LCP？
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('LCP Element:', entry.element);
console.log('LCP Load Time:', entry.loadTime);
console.log('LCP Render Time:', entry.renderTime);
console.log('LCP Size:', entry.size);
console.log('LCP URL:', entry.url); // 如果LCP元素是一个图片或视频，可以获取URL
});
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });这段代码会监听 largest-contentful-paint 事件，并在控制台输出最大内容元素的详细信息，包括元素本身、加载时间、渲染时间、大小和 URL。
示例：
假设控制台输出了以下信息：
LCP Element: <img src="https://example.com/hero.jpg">
LCP Load Time: 800 ms
LCP Render Time: 1200 ms
LCP Size: 200 KB
LCP URL: https://example.com/hero.jpg这说明 https://example.com/hero.jpg 这张图片是页面上最大的内容元素，加载时间是 800ms，渲染时间是 1200ms，大小是 200KB。咱们就可以去优化这张图片的加载速度，比如使用 CDN 加速、压缩图片大小等。
常见 LCP 慢的原因及优化方法：
| 原因 | 优化方法 |
|---|---|
| 服务器响应慢 | 1. 优化服务器性能，减少响应时间。 2. 使用 CDN 加速静态资源的加载。 |
| 阻塞渲染的 JavaScript 和 CSS | 1. 减少阻塞渲染的 JavaScript 和 CSS 文件。 2. 使用异步加载 JavaScript 文件。 3. 使用 CSS 代码分割，只加载必要的 CSS 样式。 |
| 资源加载慢 | 1. 优化图片和视频的加载速度。 2. 使用 CDN 加速静态资源的加载。 3. 使用浏览器缓存。 |
| 客户端渲染 | 1. 尽量使用服务端渲染，减少客户端的渲染压力。 2. 优化 JavaScript 代码，减少渲染时间。 |
高级技巧：结合 Reporting API，打造自动化性能监控系统
Performance Observer API 只是一个监控工具，如果咱们想打造一个自动化性能监控系统，还需要结合 Reporting API。Reporting API 可以将性能数据发送到服务器，咱们就可以在服务器端对这些数据进行分析和处理，生成性能报告，及时发现和解决性能问题。
Reporting API 简单示例：
navigator.sendBeacon('/report-endpoint', JSON.stringify({
longTasks: longTaskData, // 从 Performance Observer 获取的 long task 数据
layoutShifts: layoutShiftData, // 从 Performance Observer 获取的 layout shift 数据
lcpData: lcpData // 从 Performance Observer 获取的 LCP 数据
}));这段代码使用 navigator.sendBeacon() 方法将性能数据发送到 /report-endpoint 这个服务器端接口。sendBeacon() 方法会在浏览器空闲时异步发送数据，不会阻塞页面的渲染。
服务器端处理：
服务器端接收到性能数据后，可以进行各种分析，比如：
- 统计 Long Tasks 的平均持续时间，找出导致卡顿的页面。
- 统计 Layout Shifts 的平均值，找出导致页面跳动的页面。
- 统计 LCP 的平均时间，找出加载速度慢的页面。
然后，咱们就可以将这些分析结果展示在性能报告中，让团队成员及时了解网站的性能状况。
总结：
Performance Observer API 是一个非常强大的性能监控工具，它可以帮助咱们精确追踪网页的各种性能问题，特别是 Long Tasks、Layout Shifts 和 LCP。通过结合 Reporting API，咱们可以打造一个自动化性能监控系统，及时发现和解决性能问题，提升用户体验。
记住，性能优化不是一蹴而就的，需要持续地监控和改进。希望今天的讲座能帮助大家更好地理解和使用 Performance Observer API，打造更流畅、更快速的网页！