如何使用 Performance API 测量首屏时间？

要衡量首屏时间 (First Screen Time), 在 Performance API 中使用的主要指标是 首次内容绘制 (First Contentful Paint, FCP)。FCP 记录了从页面开始加载到浏览器首次渲染任何内容的时间点，它直接对应首屏时间，即用户首次看到第一屏关键内容出现前的等待时间。

使用 Performance API 获取 FCP 的方法

在 Performance API 中，可以使用 PerformanceObserver 来监听 FCP 事件。以下是一个简单示例代码：

const observer = new PerformanceObserver((list) => {
  const entries = list.getEntriesByName('first-contentful-paint');
  entries.forEach((entry) => {
    const fcpTime = entry.startTime; // 单位为毫秒
    console.log('首屏时间: ', fcpTime, '毫秒');
    observer.disconnect();
  });
});

// 开始观察 'paint' 类型的事件, 包括 FCP
observer.observe({ type: 'paint', buffered: true });

在这个代码中：

• entry.startTime 表示 FCP 的发生时间点。
• type: 'paint' 确保观察器会捕获绘制事件中的 FCP。
• entries.forEach 检查事件是否为 FCP，以避免触发其他绘制事件。

关键说明

1. 为什么选择 FCP？
   • FCP 捕获了浏览器首次渲染文本、图像、视频或其他内容的时间点，这与首屏的定义高度重合。
   • 理想情况下，FCP 应小于 1.0 秒（基于 Web Vitals 标准）。
2. 备选考虑：LCP (Largest Contentful Paint)
   • 在某些场景下，LCP 也用于优化首屏时间（因为捕获最大内容的渲染），但 LCP 主要衡量最显著元素的延迟，可能与实际首屏边界不绝对一致。
   • LCP 也可以使用 PerformanceObserver 监听（类型为 largest-contentful-paint），但不作为首屏时间推荐的核心指标。
3. 常见误区
   • performance.timing.loadEventEnd - performance.timing.navigationStart 常用于页面总加载时间，但包含所有资源加载，可能导致过高估计，不适合精确跟踪首屏内容。

为确保准确性，始终在真实浏览器环境（如 Chrome DevTools 的性能面板）中验证 FCP 数值。对于现代优化工作流，推荐集成 Web Vitals 库（例如 web-vitals.js）自动化测量 FCP。