使用 PerformanceObserver 实现网页性能优化的最佳实践

前言

在当今的网页开发中，性能监控已经成为确保用户体验的一个关键部分。用户对网站的速度和响应性越来越敏感，性能问题可能直接影响用户的满意度和留存率。因此，了解并使用合适的工具来监控和优化网页性能显得尤为重要。
今天，我们将深入探讨一个强大的性能监控工具——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 都提供了极大的灵活性和便利性。