详细说说Performance API具体怎么去计算首屏加载时间

计算首屏加载时间主要通过 Performance API 提供的 关键时间节点 和 现代性能指标 来实现。以下是具体方法和代码示例：

---

一、使用 PerformanceObserver 监听核心指标（推荐）

1. 监听首次内容渲染（FCP - First Contentful Paint）

FCP 衡量浏览器首次渲染文本、图片或非空白 Canvas 的时间：

const observer = new PerformanceObserver((list) => {
   
  const entries = list.getEntriesByName('first-contentful-paint');
  entries.forEach(entry => {
   
    console.log('FCP 时间:', entry.startTime, '毫秒');
    // 通常认为 FCP < 1.8 秒为良好
  });
});
observer.observe({
    type: 'paint', buffered: true });

2. 监听最大内容渲染（LCP - Largest Contentful Paint）

LCP 反映视窗内最大元素（如图片、标题）的渲染完成时间：

new PerformanceObserver((list) => {
   
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1]; // 取最后一次 LCP（可能多次更新）
  console