核心性能指标与优化实践

FCP 首次内容绘制  ：第一个文本/图片出现的时间点（"开始有东西了"）
LCP 最大内容绘制  ：视口内最大可见元素（首屏主体）绘制完成（衡量加载体验）
CLS 布局偏移      ：页面元素意外移动的总量（衡量稳定性）
TBT 总阻塞时间    ：主线程被长任务阻塞的累计时长（衡量交互准备）
INP 交互延迟      ：用户交互到浏览器响应的延迟（接替 FID，衡量交互响应）

<!-- 运行环境：任意现代浏览器 -->
<!-- 步骤：存为 brw-l15.html，用浏览器打开（建议用无痕+慢速网络模拟），看控制台 -->

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>核心性能指标实测</title></head>
<body>
  <h1 id="main">我是首屏最大内容（LCP 候选）</h1>
  <p>打开控制台看 FCP / LCP / CLS 实测值</p>
  <script>
    // FCP：paint 类型里只有 first-paint / first-contentful-paint 两类条目
    new PerformanceObserver((list) => {
      for (const e of list.getEntries()) {
        if (e.name === 'first-contentful-paint') console.log('FCP =', e.startTime.toFixed(1), 'ms')
      }
    }).observe({ type: 'paint', buffered: true })

    // LCP：是独立的 largest-contentful-paint 类型（paint 里没有 LCP 条目，必须单独监听）
    new PerformanceObserver((list) => {
      for (const e of list.getEntries()) console.log('LCP =', e.startTime.toFixed(1), 'ms')
    }).observe({ type: 'largest-contentful-paint', buffered: true })

    // CLS：累计布局偏移
    let cls = 0
    new PerformanceObserver((list) => {
      for (const e of list.getEntries()) if (!e.hadRecentInput) cls += e.value
      console.log('CLS(累计) =', cls.toFixed(3))
    }).observe({ type: 'layout-shift', buffered: true })
  </script>
</body>
</html>

LCP：图片 preload + 现代格式(AVIF/WebP) + 尺寸匹配 + 懒加载非首屏；字体 font-display:swap；首屏 SSR/流式
CLS：图片/广告位预留尺寸(width/height、aspect-ratio)；字体 swap 防跳；动态插入用占位
TBT/INP：拆分长任务(scheduler.yield/分片)；虚拟列表、防抖节流；Web Worker 扛重活
通用：缓存 + CDN + HTTP/2；gzip/br 压缩、Tree Shaking、代码分割