页面性能

• 参考：以用户为中心的性能指标

• web-vitals 相关

资源加载速度

• 代码压缩，文件压缩 gzip，缓存，cdn，http2，

• css 放头部，js 放在 body 底部(看情况加上 defer/async)

• 代码分割，动态 import

• html 里面写： preload，dns-prefetch，prefetch

• 图片：压缩，webp，srcSet(根据 resolution 或者 width 设置不同大小图片)，先小图再替换成大图

代码性能

• 减少重排重绘，transform 只经过合成阶段

• react 代码优化

测量与查看的工具

• js: PerformanceObserver，window.performance.timing

• web-vitals 库

• pageSpeed，lighthouse

• chrome 用户体验报告

TTFB 请求开始到收到响应的时间

• 在 JavaScript 中测量 TTFB

FCP 首次内容绘制 PerformanceObserver

new PerformanceObserver(entryList => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry)
  }
}).observe({ type: 'paint', buffered: true })

LCP 最大内容绘制 PerformanceObserver

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

FID 首次输入延迟 PerformanceObserver

TTI 可交互时间 实验室测量 lighthouse

TBT 总阻塞时间（FCP 与 TTI 之间的总时间）

CLS 累积布局偏移 PerformanceObserver