一. 前言
Web性能优化是前端领域重要的技术问题，关乎用户体验，好的用户体验能够增加用户粘性。本文将会围绕性能优化指标讨论如何做好性能优化。
二. 性能指标
2.1 TTFB
TTFB即首个字节返回时间（Time To First Byte），时间越短意味着请求响应越快。低于800ms代表良好，800ms到1800ms之间代表待改善，1800ms以上代表差。
以下是优化该性能指标的常见方法:
CDN- 压缩算法
HTTP/2或HTTP/3HTTP缓存策略- 减少重定向
2.2 LCP
LCP即首次绘制内容时间（First Contentful Paint），时间越短意味着页面白屏时间越短。低于1.8s代表良好，1.8s到3s之间代表待改善，3s以上代表差。
首先我们要知道浏览器解析渲染HTML文档流程，即解析HTML生成DOM树，解析CSS生成CSSOM树，然后合成Render Tree，再进行布局绘制，生成合成图，最终绘制到页面上展示。
其中我们要注意CSS和Javascript都会阻塞Render Tree的生成，所以优化好CSS和Javascript解析执行逻辑至关重要。
以下是优化该性能指标的常见方法:
- 服务端流式渲染
- 内联关键
CSS - 减少使用
CSS @import Javascript脚本添加async或defer属性
2.3 LCP
LCP即最大绘制内容时间（Largest Contentful Paint）。低于2.5s代表良好，2.5s到4s之间代表待改善，4s以上代表差。
以下是优化该性能指标的常见方法:
- 减少资源加载时延，可以使用资源预抓取，如
prefetch/preload - 使用现代图片格式，如
AVIF/WebP - 雪碧图
- 图片考虑使用
base64 - 字体文件使用
woff2格式 - 代码压缩，如
HTML/CSS/JS - 图片压缩
- 去除无用代码，如
Tree Shaking - 代码分割，如
webpack SplitChunksPlugin - 动态加载，如
webpack import()
2.4 CLS
CLS即累积布局偏移（Cumulative Layout Shift）。低于0.1s代表良好，0.1s到0.25s之间代表待改善，0.25s以上代表差。
以下是优化该性能指标的常见方法:
- 图片预设宽高
- 设置
font-display - 使用
transform
2.5 INP
INP即下次渲染可交互时间（Interaction Next Paint）。低于200ms代表良好，200ms到500ms之间代表待改善，500ms以上代表差。
以下是优化该性能指标的常见方法:
- 优化长任务，如使用
WebWorker、requestAnimationFrame或scheduler.yield() - 减少
DOM树大小，如虚拟列表 - 使用节流防抖
- 减少访问昂贵属性数据或方法，如
offsetWidth或getBoundingClientRect - 减少使用复杂选择器
三. 性能分析
3.1 web-vitals
web-vitals是Google维护的npm包，提供了常见性能指标的处理方法，支持业务自定义收集处理性能指标数据。
import { onLCP } from 'web-vitals'
onLCP(console.log)
3.2 lighthouse-ci
可以集成到CI/CD流程中，自动化输出性能报告。
