#前端性能指标与测量 (Performance API)

#1. 核心指标 (Core Web Vitals)

Google 提出的用于衡量用户体验的三个核心指标：

1. LCP (Largest Contentful Paint): 最大内容绘制，衡量加载性能。

   • 目标：< 2.5s。
   • 代表视口中最大的图片或文本块的渲染时间。

2. INP (Interaction to Next Paint) (替代 FID): 交互到下次绘制，衡量交互响应性。

   • 目标：< 200ms。
   • 观察用户点击、按键等操作后，浏览器多久能给与视觉反馈。

3. CLS (Cumulative Layout Shift): 累积布局偏移，衡量视觉稳定性。

   • 目标：< 0.1。
   • 防止页面加载过程中元素突然跳动（例如图片未定高导致下方文本突然下移）。

#2. 测量方式

#(1) Performance API

浏览器原生提供的精确计时工具。

// 获取当前时间戳 (相对于 performance.timeOrigin)
const now = performance.now();

// 获取导航时间信息 (DNS、TCP、首字节等)
const timing = performance.getEntriesByType('navigation')[0];
console.log('DNS耗时:', timing.domainLookupEnd - timing.domainLookupStart);
console.log('TTFB:', timing.responseStart - timing.requestStart);

#(2) PerformanceObserver

实时监听性能事件。

// 监听 LCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

#(3) web-vitals 库 (Google 官方)

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

#3. 面试考点

#Q:performance.now() 和Date.now() 的区别？

• Date.now() 返回的是 Unix 时间戳 (毫秒)，受系统时间影响，可能被用户修改。
• performance.now() 返回的是相对于页面加载开始的高精度时间 (微秒级)，单调递增，不受系统时间调整影响，适合测量耗时。

#Q: 如何优化 LCP？

• 优化关键资源加载 (预加载图片 rel="preload")。
• 使用 CDN。
• 压缩图片 / 使用 WebP。
• 服务端渲染 (SSR)。

#Q: 白屏时间 (FP) vs 首屏时间 (FCP)？

• FP (First Paint): 这里指首次绘制，屏幕产生像素变化。
• FCP (First Contentful Paint): 首次内容绘制，渲染出第一个文本、图片等 DOM 元素。