Performance Observer API：运行时性能指标与瓶颈分析

在当今竞争激烈的数字环境中，网站和 Web 应用的性能对于用户参与度和商业成功至关重要。加载时间缓慢和界面无响应会导致用户沮丧、放弃交易，并最终造成收入损失。Performance Observer API 是一个强大的工具，允许开发人员监控和分析运行时性能指标，识别瓶颈，并优化其应用，以便无论用户身在何处或使用何种设备，都能获得更流畅、更快速、更愉悦的用户体验。

什么是 Performance Observer API？

Performance Observer API 是一个 JavaScript API，它提供了一种机制，用于在 Web 应用中观察性能相关事件并做出反应。与依赖定期抽样或手动插桩的传统性能监控技术不同，Performance Observer API 提供了一种更高效、更灵活的方式来实时捕获性能数据。它允许开发人员订阅特定的性能条目类型，并在记录新条目时接收通知。

这种“观察并反应”的方法可实现主动的性能监控，使开发人员能够在性能问题影响用户体验之前识别并解决它们。该 API 在现代浏览器中已标准化，确保了行为的一致性和跨平台兼容性。

关键概念与特性

要有效利用 Performance Observer API，了解其核心概念和特性至关重要：

• PerformanceEntry：表示单个性能测量或事件。性能条目包含有关事件类型、其开始和结束时间以及其他相关属性的信息。示例包括 resource、mark、measure、navigation、longtask 和 event。
• PerformanceObserver：一个对象，允许您订阅特定的性能条目类型，并在新条目添加到浏览器的性能时间线时接收通知。
• observe() 方法：用于配置 PerformanceObserver 以侦听特定的性能条目类型。您可以指定要观察的条目类型，以及一个 buffered 选项以接收历史条目。
• disconnect() 方法：用于停止 PerformanceObserver 侦听性能事件。
• takeRecords() 方法：返回一个数组，其中包含所有已被观察但尚未被观察者回调函数处理的性能条目。
• 回调函数：一个在观察到新性能条目时执行的函数。此函数接收一个包含所观察条目的 PerformanceObserverEntryList 对象。

支持的性能条目类型

Performance Observer API 支持多种性能条目类型，每种类型都提供了对 Web 应用性能不同方面的特定见解。一些最常用的条目类型包括：

• resource：提供有关加载单个资源（如图像、脚本、样式表和字体）的信息。此条目类型包括资源 URL、开始和结束时间、获取持续时间以及传输大小等详细信息。
• mark：允许您在代码中创建自定义时间戳，以测量特定代码段的持续时间。您可以使用标记来跟踪关键操作（如数据处理或 UI 渲染）的开始和结束。
• measure：用于计算两个标记之间的持续时间。此条目类型提供了一种方便的方式来测量自定义代码段的性能。
• navigation：提供有关页面导航计时（包括 DNS 查询时间、TCP 连接时间、请求和响应时间以及 DOM 处理时间）的信息。
• longtask：识别长时间（通常超过 50 毫秒）阻塞主线程的任务。长任务可能导致 UI 无响应和卡顿。
• event：记录特定浏览器事件（如 click、keydown 和 scroll）的计时信息。
• layout-shift：跟踪页面上意外的布局偏移。这些偏移可能会让用户感到突兀，并对用户体验产生负面影响。
• largest-contentful-paint：测量最大内容元素在页面上可见所需的时间。
• first-input-delay：测量浏览器响应首次用户交互（例如点击或轻触）所需的时间。
• element：报告页面上特定元素渲染的计时信息。

实践示例与用例

Performance Observer API 可用于多种场景以改善 Web 应用性能。以下是一些实践示例：

1. 监控资源加载时间

resource 条目类型允许您跟踪单个资源（如图像、脚本和样式表）的加载时间。此信息可用于识别影响页面加载时间的加载缓慢的资源。例如，您可以使用以下代码监控资源加载时间：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 resource 条目并将资源 URL 和持续时间记录到控制台。通过分析这些数据，您可以识别加载缓慢的资源并通过压缩图像、使用内容分发网络（CDN）或优化服务器配置来优化它们。

全球视角：在监控资源加载时间时，请考虑用户的地理位置。网络连接较慢地区的用户可能会经历明显更长的加载时间。使用地理分布服务器的内容分发网络（CDN）可以帮助缓解此问题。

2. 测量自定义代码执行时间

mark 和 measure 条目类型允许您测量自定义代码段的执行时间。这对于识别应用逻辑中的性能瓶颈非常有用。例如，您可以使用以下代码测量特定函数的持续时间：

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

此代码在您要测量的代码段前后创建两个标记，start 和 end。然后它使用 performance.measure() 方法计算两个标记之间的持续时间。PerformanceObserver 侦听 measure 条目并将测量名称和持续时间记录到控制台。通过分析这些数据，您可以使用缓存、记忆化或算法优化等技术来识别性能不佳的代码段并进行优化。

可行的见解：识别您应用的关键路径——即最常执行且对性能影响最大的代码序列。将优化工作集中在这些关键路径上，以实现最显著的性能提升。

3. 识别长任务

longtask 条目类型可识别长时间阻塞主线程的任务。长任务可能导致 UI 无响应和卡顿，从而导致糟糕的用户体验。您可以使用以下代码监控长任务：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

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

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 longtask 条目并将任务名称和持续时间记录到控制台。通过分析这些数据，您可以识别长时间运行的任务，并通过将其分解成更小的块、使用异步操作或将其卸载到 Web Worker 来优化它们。

全球写作指南：在解释技术概念时，请使用清晰简洁的语言，以便不同技术水平的读者都能理解。避免使用行话，并为不熟悉的术语提供上下文。

4. 分析导航计时

navigation 条目类型提供了有关页面导航计时的详细信息，包括 DNS 查询时间、TCP 连接时间、请求和响应时间以及 DOM 处理时间。这些数据可用于识别页面加载过程中的瓶颈。例如，您可以使用以下代码分析导航计时：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 navigation 条目并将各种计时指标记录到控制台。通过分析这些数据，您可以识别诸如 DNS 查询缓慢、TCP 连接缓慢、请求处理缓慢、响应处理缓慢或 DOM 处理缓慢等瓶颈。然后，您可以采取适当的措施来解决这些瓶颈，例如优化 DNS 配置、提高服务器性能或优化 HTML 和 JavaScript 代码。

SEO 优化：在内容中自然地使用相关关键字。在本节中，“导航计时”、“DNS 查询时间”、“TCP 连接时间”和“页面加载过程”等关键字被无缝地融入其中。

5. 监控布局偏移

layout-shift 条目类型跟踪页面上意外的布局偏移。这些偏移可能会让用户感到突兀，并对用户体验产生负面影响。它们通常是由于没有尺寸的图像、加载较晚的广告或动态注入的内容引起的。您可以使用以下代码监控布局偏移：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 layout-shift 条目并将偏移值（代表偏移幅度的分数）记录到控制台。值越高表示偏移越显著。hadRecentInput 属性指示偏移是否发生在用户输入后的 500 毫秒内。由用户输入触发的偏移通常被认为问题不大。sources 属性提供了导致偏移的元素的详细信息。通过分析这些数据，您可以通过为图像指定尺寸、为广告预留空间以及避免动态注入可能导致重排的内容来识别和修复布局偏移问题。

可行的见解：使用像 Google 的 Lighthouse 这样的工具来识别布局偏移问题并获取修复建议。优先修复那些在没有用户输入的情况下发生的偏移。

6. 测量最大内容绘制 (LCP)

largest-contentful-paint 条目类型测量最大内容元素在页面上可见所需的时间。LCP 是一项核心 Web 指标，反映了页面的感知加载速度。良好的 LCP 分数应为 2.5 秒或更短。您可以使用以下代码测量 LCP：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 largest-contentful-paint 条目并将开始时间、元素和 URL 记录到控制台。通过分析这些数据，您可以通过优化图像大小、使用 CDN 或预加载资源来识别最大内容元素并优化其加载时间。

全球视角：考虑到不同用户会因屏幕尺寸和分辨率的不同而有不同的 LCP 元素。在设计应用时，请确保在各种设备和屏幕尺寸上都能获得良好的 LCP 分数。

7. 测量首次输入延迟 (FID)

first-input-delay 条目类型测量浏览器响应首次用户交互（例如点击或轻触）所需的时间。FID 是另一项核心 Web 指标，反映了页面的交互性。良好的 FID 分数应为 100 毫秒或更短。您可以使用以下代码测量 FID：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 first-input 条目并将延迟、事件类型和目标元素记录到控制台。通过分析这些数据，您可以识别导致长输入延迟的原因，并优化您的 JavaScript 代码以减少在主线程上花费的时间。

可行的见解：将长时间运行的任务分解成更小的块，使用 Web Worker 将任务卸载到后台线程，并优化事件监听器以减少用户交互的处理时间。

高级技术与注意事项

除了上述基本用例外，Performance Observer API 还可用于更高级的场景，以更深入地了解 Web 应用性能。以下是一些高级技术和注意事项：

1. 使用缓冲

observe() 方法中的 buffered 选项允许您检索在创建 PerformanceObserver 之前记录的历史性能条目。这对于捕获在初始页面加载期间或在您的监控代码加载之前发生的性能数据非常有用。例如：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 navigation 和 resource 条目，并检索在观察者创建之前记录的所有历史条目。

2. 筛选性能条目

您可以根据特定标准筛选性能条目，以专注于与您的分析最相关的数据。例如，您可以根据 URL 或内容类型筛选资源条目：

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

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

            

              
                Copy
              
            
          

此代码创建一个 PerformanceObserver，它侦听 resource 条目并筛选它们，只包括扩展名为 .jpg 的图像资源的条目。

3. 使用 Web Worker

为避免影响主线程的性能，您可以将性能监控和分析卸载到 Web Worker。这使您可以在后台收集和处理性能数据，而不会阻塞 UI。例如，您可以创建一个 Web Worker 来侦听性能事件并将数据发送到主线程进行分析。

全球写作指南：使用与全球受众相关的示例。避免使用特定于某个国家或文化的示例。

4. 与分析平台集成

Performance Observer API 可以与分析平台集成，以便在一个集中的位置收集和分析性能数据。这使您可以跟踪性能趋势、识别性能回归，并将性能指标与其他用户行为数据关联起来。您可以使用其 API 将性能条目发送到您的分析平台，或将它们记录到服务器端端点。

5. 为旧版浏览器使用 Polyfill

虽然大多数现代浏览器都支持 Performance Observer API，但它可能在旧版浏览器中不可用。为了支持旧版浏览器，您可以使用一个 polyfill，它提供了 API 的后备实现。网上有几个可用的 polyfill，您可以在您的应用中使用。

使用 Performance Observer API 的最佳实践

为了有效利用 Performance Observer API 并避免常见陷阱，请遵循以下最佳实践：

• 仅监控与您的目标相关的指标。避免收集可能影响性能的过多数据。
• 使用筛选来专注于最重要的数据。根据特定标准筛选性能条目，以减少需要处理的数据量。
• 将性能监控卸载到 Web Worker。这将防止性能监控影响主线程的性能。
• 与分析平台集成以跟踪性能趋势。这将使您能够识别性能回归，并将性能指标与其他用户行为数据关联起来。
• 使用 polyfill 支持旧版浏览器。这将确保您的性能监控代码在各种浏览器中都能正常工作。
• 彻底测试您的性能监控代码。确保您的代码本身没有引入任何性能问题。
• 注意数据隐私法规。确保您在未经用户同意的情况下不收集任何个人身份信息（PII）。

SEO 优化：创建引人入胜的元描述。在 JSON 元数据中提供了总结博文内容的简明描述。

结论

Performance Observer API 是一个强大的工具，使开发人员能够监控和分析运行时性能指标、识别瓶颈，并优化其 Web 应用，以获得更流畅、更快速、更愉悦的用户体验。通过了解该 API 的关键概念和特性，并遵循其使用最佳实践，您可以深入了解应用的性能，并为您的用户提供更好的用户体验，无论他们身在何处或使用何种设备。随着 Web 应用变得越来越复杂，Performance Observer API 将继续是确保最佳性能和用户满意度的重要工具。

请记住，始终将用户体验放在首位。性能优化的目的应始终是为您的用户提供无缝和愉悦的体验。通过有效使用 Performance Observer API，您可以更深入地了解应用的性能，并做出明智的决策来改善用户体验。

通过仔细考虑性能的全球影响，开发人员可以创建快速、响应迅速且对世界各地的用户都可访问的 Web 应用。这需要一种全面的方法，考虑到网络延迟、设备能力和文化偏好等因素。