Q2 · 性能指标

如何用代码获取 FCP？指标分数段？怎么提升？

FCPPerformanceObserver首屏优化有 Demo

⚡ 速记答案（30 秒）

获取：PerformanceObserver 监听 paint 类型，筛选 first-contentful-paint
分数段：好 < 1.8s；一般 1.8–3s；差 > 3s
提升：减少首屏 JS/CSS 体积，使用代码分割 + 懒加载
关键 CSS 内联、JS defer/async，使用 CDN、压缩、预加载关键资源
可用 SSR / 预渲染 / 骨架屏提升感知速度

🎮 交互 Demo - 获取 FCP 指标

FCP (首次内容绘制)

获取中... (目标 < 1.8s)

LCP (最大内容绘制)

获取中... (目标 < 2.5s)

TTFB (首字节时间)

获取中... (目标 < 0.8s)

💡 说明：这些是当前页面的实际性能指标。刷新页面可以重新获取。绿色表示优秀，黄色表示需改进，红色表示较差。

📖 详细讲解

FCP 定义

First Contentful Paint：浏览器首次渲染任何文本、图片、非空白 canvas 或 SVG 的时间。

分数段标准

评级	时间
好	< 1.8s
需改进	1.8s - 3s
差	> 3s

优化策略

1. 减少阻塞资源

• CSS 放 head，关键 CSS 内联

• JS 使用 defer/async

• 移除未使用的 CSS/JS

2. 优化资源加载

• 使用 CDN

• 开启 Gzip/Brotli 压缩

• 预加载关键资源

3. 提升感知速度

• SSR/SSG

• 骨架屏

• 渐进式图片

💻 代码示例

获取 FCP 指标

// 方式一：PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime, 'ms');
      observer.disconnect();
    }
  }
});
observer.observe({ type: 'paint', buffered: true });

// 方式二：使用 web-vitals 库
import { onFCP } from 'web-vitals';
onFCP((metric) => {
  console.log('FCP:', metric.value);
});

💡

面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。