前端性能指标

1. LCP - Largest Contentful Paint 最大内容绘制
   • 含义：页面可视区域内，最大的内容元素（图片、文本块、视频封面）完成渲染的时间
   • 意义：衡量加载速度，用户感知 “页面是不是加载出来了”
   • 标准阈值（Google 官方）：
   ◦ 良好：≤2.5s
   ◦ 待优化：2.5s ~ 4.0s
   ◦ 差：>4.0s
   • 常见优化点：
   ◦ 优化关键图片（压缩、WebP/AVIF、CDN、width/height、loading=lazy非首屏）
   ◦ 减少关键 CSS 阻塞、内联首屏关键 CSS
   ◦ 避免超大字体、慢加载字体阻塞文本渲染
   ◦ 减少首屏 DOM 数量与层级

2. FID - First Input Delay 首次输入延迟（逐渐被 INP 替代）
   • 含义：用户第一次与页面交互（点击、输入、按键）到浏览器真正开始处理事件的延迟
   • 意义：衡量交互响应速度，页面是否 “卡死、迟钝”
   • 标准：
   ◦ 良好：≤100ms
   ◦ 待优化：100ms ~ 300ms
   ◦ 差：>300ms
   • 问题根源：主线程被长任务阻塞（长 JS、复杂计算、大量重排重绘）

3. CLS - Cumulative Layout Shift 累积布局偏移
   • 含义：页面加载与使用过程中，无预期的元素位置偏移总和，分数越低越好
   • 意义：衡量视觉稳定性，防止按钮跳动、文字漂移、误触
   • 标准：
   ◦ 良好：≤0.1
   ◦ 待优化：0.1 ~ 0.25
   ◦ 差：>0.25
   • 常见诱因：
   ◦ 图片 / 视频未设 width/height 或 aspect-ratio
   ◦ 动态插入广告、弹窗、轮播图未预留空间
   ◦ 字体加载过晚导致文字重排（FOIT/FOUT）
   ◦ 网络慢导致资源晚加载、挤动布局

4. INP - Interaction to Next Paint 与下一次绘制的交互
   含义：观测页面所有交互（点击、触摸、按键），取响应最慢的那个的延迟，代表页面最差交互表现
   • 标准：
   ◦ 良好：≤200ms
   ◦ 待优化：200ms ~ 500ms
   ◦ 差：>500ms
   • 优化方向：拆解长任务、异步非关键逻辑、减少同步 DOM 操作、合理使用 Web Worker

5. TTFB - Time To First Byte
   • 从请求发起到浏览器收到第一个字节的时间
   • 反映：服务器响应、网络链路、后端处理速度
   • 优化：CDN、缓存、服务端渲染提速、减少重定向、优化接口耗时

6. FCP - First Contentful Paint 首次内容绘制
   • 页面第一个文本 / 图片 / SVG 等内容渲染的时间
   • 比 LCP 早，代表 “页面开始有内容”，但不如 LCP 能代表完整首屏体验

7. TTI - Time To Interactive 可交互时间
   • 页面加载到：关键资源加载完成 + 主线程空闲、能稳定响应用户输入的时间
   • 用于判断页面 “真正可用” 的时刻

8. TBT - Total Blocking Time 总阻塞时间
   • FCP 到 TTI 之间，所有长任务（>50ms） 超出 50ms 部分的总和
   • 直接反映主线程阻塞程度，和 FID/INP 强相关
   • 例：一个 120ms 任务 → 阻塞时间 = 70ms

运行时性能指标（页面使用阶段，容易被忽略）

这类指标决定长页面、复杂交互（后台、图表、大屏、编辑器）的流畅度：

1. FPS 帧率
   • 理想：稳定60FPS（约 16.67ms / 帧）
   • 问题：掉帧、卡顿、抖动、滚动不跟手
   • 原因：重排重绘过多、JS 长任务、GPU 压力大、图层过多
2. 长任务 Long Tasks
   • 执行时间 >50ms 的同步 JS 任务，会阻塞渲染与交互
   • 优化：拆分任务、setTimeout/requestIdleCallback、Web Worker、异步计算
3. 重排 (Reflow) / 重绘 (Repaint) 频率
   • 修改width/height/top/left等 → 重排（开销大）
   • 修改color/background等不影响布局样式 → 重绘
   • 高频触发会直接掉帧，优先用transform/opacity走 GPU 合成
4. 内存占用 & 内存泄漏
   • JS 堆内存持续上涨、不回收
   • 表现：页面越用越卡、崩溃、闪退
   • 常见点：未清理定时器 / 事件监听、全局变量堆积、闭包滥用、DOM 引用未释放
5. 网络资源指标
   • 资源体积：JS/CSS/ 图片 / 字体总大小、首屏资源体积
   • 请求数量：接口数、静态资源数，过多导致 TCP 队列阻塞
   • 资源加载时机：非首屏资源阻塞首屏、未做 code splitting、未懒加载