深入浅出 window.performance 与性能数据收集

在现代网络应用中，用户体验至关重要。为了确保流畅的交互和满意的访问，Web 性能监控已成为必不可少的工具。window.performance 是一个功能强大的 API，使开发人员能够深入了解浏览器的性能，收集关键数据并识别潜在的瓶颈。

window.performance API 概览

window.performance API 提供了一个丰富的函数集合，用于测量和记录与页面加载、用户交互、网络请求和资源使用相关的性能数据。这些函数可分为以下主要类别：

• 时机： 跟踪页面加载和关键事件的时间戳，例如 DOMContentLoaded 和 load。
• 内存： 监控当前内存使用情况，例如堆分配和垃圾收集活动。
• 网络： 测量网络请求的持续时间、大小和类型，包括 HTTP 请求和 WebSocket。
• 资源： 记录加载和执行脚本、样式表和图像等资源所花费的时间。

关键性能数据收集

为了全面了解应用程序的性能，收集和分析以下关键性能数据至关重要：

• 页面加载时间： 从开始加载页面到完全加载和交互的时间。
• DOMContentLoaded： DOM（文档对象模型）解析和构建的时间。
• load： 所有资源（包括图像、脚本和样式表）加载并执行完毕的时间。
• 网络请求时间： 服务器响应时间和传输大小的测量值。
• 资源加载时间： 加载和执行脚本、样式表和图像的持续时间。
• 内存使用： 应用程序分配的内存量以及垃圾收集活动。

优化和改善性能

收集关键性能数据后，就可以利用这些数据来优化和改善应用程序的性能。常见策略包括：

• 优化网络请求： 通过合并请求、启用 HTTP/2 和使用内容分发网络（ CDN ）来减少网络开销。
• 缩小资源大小： 使用代码缩小、图像优化和异步加载技术来减少资源大小。
• 优化脚本执行： 通过使用脚本加载器、defer 和 async 属性来管理脚本执行。
• 监控内存使用： 识别内存泄漏并通过适当的资源清理技术来释放未使用的内存。

实践案例：技术实现

以下示例技术指导说明了如何使用 window.performance API 在 React 应用程序中收集和监控关键性能数据：

1. 初始化 PerformanceObserver

const observer = new PerformanceObserver((list) => {
  const performanceEntries = list.getEntries();
  // 将性能数据处理到性能监控工具中
});

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

2. 测量页面加载时间

const timing = performance.timing;
const pageLoadTime = timing.loadEventEnd - timing.navigationStart;

3. 监控内存使用

const memory = performance.memory;
const heapUsed = memory.usedJSHeapSize;
const heapTotal = memory.totalJSHeapSize;

总结

window.performance API 是一个功能强大的工具，用于收集和分析关键性能数据，从而优化和改善 Web 应用程序的性能。通过掌握时机、内存、网络和资源测​​量，开发人员可以识别瓶颈、优化资源并提供卓越的用户体验。