使用Performance Observer实现网页性能优化的示例详解
作者：乐闻x
前言
在当今的网页开发中，性能监控已经成为确保用户体验的一个关键部分。用户对网站的速度和响应性越来越敏感，性能问题可能直接影响用户的满意度和留存率。因此，了解并使用合适的工具来监控和优化网页性能显得尤为重要。
今天，我们将深入探讨一个强大的性能监控工具——PerformanceObserver。无论你是刚入门的开发者还是经验丰富的工程师，都可以通过这篇文章了解如何利用 PerformanceObserver 提升你的网站性能。
什么是 PerformanceObserver
PerformanceObserver 是 Web 性能 API 提供的一个接口，它允许你观察和处理性能条目（performance entries）。这些条目包含了浏览器收集的各种性能数据，比如资源加载时间、用户交互时间等。
使用 PerformanceObserver，你可以轻松地监控并分析网页的性能表现，从而做出优化决策。
如何使用 PerformanceObserver
让我们一步步来看看如何使用 PerformanceObserver。
第一步：创建 PerformanceObserver 实例
首先，我们需要创建一个 PerformanceObserver 实例。这个实例需要一个回调函数，在性能条目被记录时，这个回调函数会被调用。
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
console.log(entry);
});
});
第二步：指定需要观察的性能条目类型
接下来，我们需要告诉 PerformanceObserver 我们要观察哪些类型的性能条目。这里的类型可以是 resource, paint, measure 等等。
observer.observe({ entryTypes: ["resource"] });
在这个例子中，我们选择观察 resource 类型的条目，这意味着我们会收到关于资源加载（例如图片、脚本等）的性能数据。
完整代码示例
下面是一个完整的示例代码，它会打印页面中所有资源加载的性能条目：
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
console.log(`名称: ${entry.name}`);
console.log(`开始时间: ${entry.startTime}`);
console.log(`持续时间: ${entry.duration}`);
});
});
observer.observe({ entryTypes: ["resource"] });
高级应用
1.自定义性能测量
除了监控预定义的性能条目类型，PerformanceObserver 还支持自定义性能测量。例如，你可以使用 performance.mark() 和 performance.measure() 来标记和测量特定代码段的执行时间。
performance.mark('startTask');
// 模拟一些任务
setTimeout(() => {
performance.mark('endTask');
performance.measure('taskDuration', 'startTask', 'endTask');
const observer = new PerformanceObserver((list) => {
const entries = list.getEntriesByName('taskDuration');
entries.forEach((entry) => {
console.log(`任务时长: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ['measure'] });
}, 1000);
在这个例子中，我们通过 performance.mark('startTask') 和 performance.mark('endTask') 来标记任务的开始和结束，然后通过 performance.measure('taskDuration', 'startTask', 'endTask') 来测量任务的执行时间。最后，使用 PerformanceObserver 观察 measure 类型的条目并输出结果。
2.异步操作监控
很多性能问题源于异步操作，比如网络请求、文件读取等。通过 PerformanceObserver，我们可以对这些异步操作进行监控，获取详细的时间数据。例如，监控 AJAX 请求的时间：
function fetchData(url) {
performance.mark('fetchStart');
fetch(url).then(response => response.json()).then(data => {
performance.mark('fetchEnd');
performance.measure('fetchDuration', 'fetchStart', 'fetchEnd');
const observer = new PerformanceObserver((list) => {
const entries = list.getEntriesByName('fetchDuration');
entries.forEach((entry) => {
console.log(`请求时长: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ['measure'] });
});
}
fetchData('https://jsonplaceholder.typicode.com/todos/1');
3.页面性能综合分析
为了全面了解页面性能，我们可以结合多种性能条目类型进行综合分析。比如，结合 resource, paint, measure 类型的条目，全面监控页面加载和用户交互的各个方面。
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
console.log(`条目类型: ${entry.entryType}`);
console.log(`名称: ${entry.name}`);
console.log(`开始时间: ${entry.startTime}`);
console.log(`持续时间: ${entry.duration}`);
});
});
// 监控资源加载、页面绘制和自定义测量
observer.observe({ entryTypes: ['resource', 'paint', 'measure'] });
4.监控特定性能条目
有时候，我们只想监控特定的性能条目而不是所有条目。例如，我们可能只想关注特定的资源或测量。我们可以使用 getEntriesByType 或 getEntriesByName 方法来获取特定的条目。
const observer = new PerformanceObserver((list) => {
const resourceEntries = list.getEntriesByType('resource');
resourceEntries.forEach((entry) => {
console.log(`资源名称: ${entry.name}`);
console.log(`资源加载时间: ${entry.duration}ms`);
});
const measureEntries = list.getEntriesByName('customMeasure');
measureEntries.forEach((entry) => {
console.log(`测量名称: ${entry.name}`);
console.log(`测量时间: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ['resource', 'measure'] });
// 自定义测量
performance.mark('startCustomMeasure');
setTimeout(() => {
performance.mark('endCustomMeasure');
performance.measure('customMeasure', 'startCustomMeasure', 'endCustomMeasure');
}, 500);
5.过滤和排序性能条目
当我们处理大量性能条目时，可能需要对它们进行过滤和排序。比如，我们只关心加载时间超过一定阈值的资源，或者需要按加载时间排序条目。我们可以使用 JavaScript 的数组方法来实现这些功能。
const observer = new PerformanceObserver((list) => {
const resourceEntries = list.getEntriesByType('resource')
.filter(entry => entry.duration > 1000) // 过滤加载时间超过 1000ms 的资源
.sort((a, b) => a.duration - b.duration); // 按加载时间排序
resourceEntries.forEach((entry) => {
console.log(`资源名称: ${entry.name}`);
console.log(`资源加载时间: ${entry.duration}ms`);
});
});
observer.observe({ entryTypes: ['resource'] });
6.持续监控和定期分析
为了持续监控网页性能，我们可以将 PerformanceObserver 的数据定期发送到服务器进行分析。这样可以帮助我们长期跟踪性能变化，识别趋势和异常。
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
// 将条目数据发送到服务器进行分析
fetch('/logPerformance', {
method: 'POST',
body: JSON.stringify(entries),
headers: {
'Content-Type': 'application/json'
}
});
});
observer.observe({ entryTypes: ['resource', 'measure', 'paint', 'longtask'] });
7.使用缓存避免重复数据
在某些情况下，我们可能需要避免重复处理相同的性能条目。可以使用缓存机制来实现这一点，确保每个条目只处理一次。
const processedEntries = new Set();
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
if (!processedEntries.has(entry.name)) {
processedEntries.add(entry.name);
console.log(`处理条目: ${entry.name}`);
// 在这里进行处理
}
});
});
observer.observe({ entryTypes: ['resource'] });
优化策略
分析和优化关键路径
利用 PerformanceObserver，我们可以确定页面加载的关键路径（Critical Path），找到影响页面呈现的主要瓶颈。例如，通过分析 resource 条目的加载顺序和时间，我们可以优化资源加载顺序，减少关键资源的加载时间。
懒加载和代码分割
通过监控资源加载时间，我们可以识别出加载时间较长且影响页面性能的资源。针对这些资源，我们可以采用懒加载（Lazy Loading）和代码分割（Code Splitting）技术，将它们延迟加载或拆分成更小的模块，从而提升初始页面加载速度。
减少长任务
通过监控 longtask 条目，我们可以发现页面上执行时间较长的任务。这些任务可能会导致页面卡顿或响应延迟。我们可以将这些长任务拆分为更小的任务，或利用 requestIdleCallback 在浏览器空闲时执行非关键任务，以减少对用户体验的影响。
优化交互响应时间
通过监控用户交互相关条目（如 click, input 等），我们可以分析用户操作的响应时间，识别影响交互体验的因素。优化交互响应时间的方法包括减少 JavaScript 执行时间、使用更高效的事件处理程序等。
注意事项
1.浏览器兼容性
PerformanceObserver 在现代浏览器中普遍支持，但在某些老旧浏览器中可能不完全兼容。在使用之前，建议检查浏览器的支持情况，确保用户可以正确运行你的代码。可以使用 window.PerformanceObserver 来进行简单的兼容性检查。
if ('PerformanceObserver' in window) {
// 可以使用 PerformanceObserver
} else {
console.warn('PerformanceObserver 不支持此浏览器');
}
2.性能条目数量
在复杂的网页应用中，性能条目可能会非常多。为了避免性能开销过大，可以考虑只观察关键条目或定期清理不必要的数据。也可以设置 buffered: true 参数来获取历史条目。
observer.observe({ entryTypes: ['resource'], buffered: true });
3.安全和隐私
在监控性能数据时，注意不要收集敏感信息。例如，避免记录用户操作的详细内容或发送未经过滤的条目数据到服务器。确保遵守隐私政策和相关法规，保护用户数据。
总结
PerformanceObserver 是一个强大的工具，它能够帮助开发者实时监控和分析网页的性能表现。通过合理使用这个工具，我们可以发现潜在的性能问题，优化网页体验。无论是监控资源加载时间、用户交互响应时间还是进行自定义性能测量，PerformanceObserver 都提供了极大的灵活性和便利性。
以上就是使用Performance Observer实现网页性能优化的示例详解的详细内容，更多关于Performance Observer网页性能优化的资料请关注脚本之家其它相关文章！