Q1 · 性能指标

你所了解到的前端性能指标都有哪些？

性能指标Core Web VitalsLCPFIDCLS

⚡ 速记答案（30 秒）

  • 加载类：FP、FCP、LCP、TTFB、DomContentLoaded、onLoad
  • 交互类：FID、TBT、TTI、INP（输入响应时间）
  • 稳定性类：CLS（布局偏移）、抖动率
  • 网络/资源类：DNS、TCP、SSL、首包时间、资源大小和数量
  • 体验类：FPS、内存占用、长任务（Long Task）、错误率等

📖 详细讲解

Core Web Vitals


Google 定义的三个核心指标：


指标全称含义目标
LCPLargest Contentful Paint最大内容绘制< 2.5s
FIDFirst Input Delay首次输入延迟< 100ms
CLSCumulative Layout Shift累积布局偏移< 0.1

指标分类


加载性能

• TTFB：首字节时间（服务端响应速度）

• FCP：首次内容绘制

• LCP：最大内容绘制


交互性能

• FID：首次输入延迟

• TTI：可交互时间

• TBT：总阻塞时间

• INP：新的交互响应性指标（替代 FID）


视觉稳定性

• CLS：累积布局偏移


面试要点


• 能说出 Core Web Vitals 的三个指标及其阈值

• 理解各指标反映的用户体验维度

• 知道如何用代码获取这些指标

💻 代码示例

使用 web-vitals 库获取指标
import { onLCP, onFID, onCLS, onINP, onTTFB } from 'web-vitals';

// 获取 LCP
onLCP((metric) => {
  console.log('LCP:', metric.value, 'ms');
  // 上报到监控系统
  sendToAnalytics({ name: 'LCP', value: metric.value });
});

// 获取 FID
onFID((metric) => {
  console.log('FID:', metric.value, 'ms');
});

// 获取 CLS
onCLS((metric) => {
  console.log('CLS:', metric.value);
});

// 获取 INP (新指标，替代 FID)
onINP((metric) => {
  console.log('INP:', metric.value, 'ms');
});
💡
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。