怎么统计页面的性能指标？

下面是一些常用的方法和工具：

1. 使用浏览器开发者工具

Chrome DevTools 提供了丰富的性能分析功能：

• Performance 面板：记录和分析页面的加载和运行过程，包括所有网络请求、JavaScript 执行、布局和绘制时间等。
• Lighthouse 面板：生成页面性能报告，提供关于加载速度、可访问性、SEO 和最佳实践的评分和建议。
• Network 面板：监控网络请求，查看每个请求的详细信息，包括加载时间和资源大小。

示例：

1. 打开 Chrome DevTools（按 F12 或 Ctrl+Shift+I）。
2. 转到 Performance 面板，点击 Record 按钮开始录制性能数据。
3. 执行页面操作，然后停止录制，查看详细的性能数据。

2. 使用 Web Vitals

Web Vitals 是 Google 提供的性能指标集合，专注于用户体验：

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

示例：

• 可以通过 Chrome DevTools 的 Lighthouse 面板查看 Web Vitals 指标。

• 使用 Web Vitals JavaScript 库直接在页面上收集和报告这些指标：

  import { getCLS, getFID, getLCP } from "web-vitals";
  
  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
  

3. 使用性能监控工具

Google PageSpeed Insights：分析页面性能并提供优化建议。它基于 Lighthouse 提供报告。

• 访问 PageSpeed Insights。
• 输入页面 URL，获取性能分析报告和改进建议。

GTmetrix：提供页面性能分析，包括加载时间、页面大小和请求数量。

• 访问 GTmetrix。
• 输入页面 URL，查看性能评分和详细分析。

4. 使用 Performance API

Performance API 提供了浏览器的低级性能数据，可以用于自定义性能测量：

• Performance.now()：获取自页面加载开始以来的时间（高精度时间戳）。
• Performance.mark() 和 Performance.measure()：标记特定事件，并测量事件之间的时间。

示例：

performance.mark("start");
// 执行某些操作
performance.mark("end");
performance.measure("my-measure", "start", "end");
const measure = performance.getEntriesByName("my-measure")[0];
console.log(`Duration: ${measure.duration}ms`);