前端性能指标与线上排查指南

本文介绍前端核心性能指标和线上问题排查思路。

目录

1. 核心性能指标

1.1 页面加载性能

指标 说明 目标值
FP First Paint，首次绘制 < 1.0s
FCP First Contentful Paint，首次内容绘制 < 1.8s
FMP First Meaningful Paint，首次有意义的绘制 < 2.0s
LCP Largest Contentful Paint，最大内容绘制 < 2.5s
TTI Time to Interactive，可交互时间 < 3.5s
SI Speed Index，速度指数 < 3.4s

1.2 资源性能

指标 说明 目标值
TTFB Time to First Byte，首字节时间 < 600ms
资源加载时间 各类资源加载完成时间 < 3s
资源大小 JS/CSS/图片等资源体积 < 1MB

1.3 运行时性能

指标 说明 目标值
FCP First Contentful Paint < 100ms
长任务 阻塞主线程超过 50ms 的任务 < 5 次

2. 关键性能指标

2.1 FCP（首次内容绘制）

衡量用户首次看到内容的时间，影响首屏体验。

2.2 LCP（最大内容绘制）

衡量页面主要内容渲染完成的时间，是核心指标之一。

2.3 FID（首次输入延迟）

从 FCP 到用户首次交互的时间差，反映页面交互响应速度。

2.4 CLS（累积布局偏移）

衡量页面布局稳定性，值越小越好（< 0.1）。

3. 线上问题排查思路

3.1 首屏慢的排查

问题：首屏加载超过 3s

排查步骤：
1. 检查 Network 面板
   - JS/CSS 文件是否过大
   - 资源数量是否过多
   - 是否有慢请求

2. 检查 Waterfall
   - 资源是否串行加载
   - 是否有阻塞渲染的资源
   - 关键资源是否延迟加载

3. 检查 Coverage
   - 关键资源优先级是否正确
   - 是否有未使用的资源

4. 检查 Performance
   - DOM 解析时间是否过长
   - 脚本执行时间是否过长

3.2 页面白屏的排查

问题：页面长时间空白

排查步骤：
1. 检查 Network
   - HTML 是否正常加载
   - JS 文件是否报错（红色）

2. 检查 Console
   - 是否有 JS 错误
   - 是否有未捕获的异常

3. 检查 FCP
   - FCP 时间是否异常（> 5s）

4. 检查骨架屏
   - 是否缺少骨架屏
   - 骨架屏加载时机

3.3 接口慢的排查

问题：API 请求超过 3s

排查步骤：
1. 检查接口响应时间
   - 查看各个接口耗时
   - 找出最慢的接口

2. 检查 Network Details
   - TTFB（首字节）是否过长
   - Download（下载）是否过长
   - TTFB 长说明后端问题

3. 检查接口调用频率
   - 是否有重复请求
   - 是否有未使用的接口

4. 检查数据量
   - 返回数据是否过大
   - 是否可以做分页

3.4 内存泄漏的排查

问题：页面使用时间越长，卡顿越明显

排查步骤：
1. 打开 Performance 面板
   - 选中一段时间的操作
   - 查看 Heap（内存堆）

2. 执行 GC（垃圾回收）
   - 记录 GC 前后内存大小
   - 如果 GC 后内存不下降，说明有泄漏

3. 检查 Detached DOM
   - Performance 中搜索 Detached
   - 大量 Detached DOM 说明泄漏

4. 使用 Chrome DevTools Memory
   - Take Heap Snapshot
   - 对比三次快照
   - 查找 Retained Objects

3.5 CPU 占用高的排查

问题：页面操作卡顿、掉帧

排查步骤：
1. 检查 Performance
   - 查看 Main 线程
   - 找出红色长任务（> 50ms）

2. 分析长任务的来源
   - 脚本执行（Scripting）
   - 渲染（Rendering）
   - 绘制（Painting）

3. 检查是否可以拆分任务
   - 大数据处理能否拆分
   - 复杂计算能否用 Web Worker

4. 检查是否有死循环
   - 代码逻辑是否有问题
   - 是否有递归调用

3.6 布局偏移（CLS）的排查

问题：页面元素位置突然变化

排查步骤：
1. 检查 Lighthouse CLS
   - 查看 CLS 得分
   - 定位偏移元素

2. 常见原因
   - 图片没有设置宽高
   - 动态内容插入
   - 字体加载完成
   - 广告注入

3. 解决方案
   - 图片设置 width/height
   - 使用骨架屏
   - 字体预加载
   - 预留空间

4. 性能优化建议

4.1 资源优化

优化项 具体措施
图片 使用 WebP、懒加载、压缩、CDN
JS/CSS 压缩、Tree Shaking、代码分割
字体 使用 WOFF2、字体子集、字体预加载
接口 合并请求、分页、缓存、压缩

4.2 代码优化

// 避免长任务
function processData(data) {
  const chunkSize = 1000
  const chunks = []

  for (let i = 0; i < data.length; i += chunkSize) {
    chunks.push(data.slice(i, i + chunkSize))
  }

  // 分批处理
  chunks.forEach(chunk => {
    requestAnimationFrame(() => {
      processChunk(chunk)
    })
  }
}

// 防抖/节流
import { debounce } from 'lodash'

const handleResize = debounce(() => {
  // 处理逻辑
}, 300)

4.3 渲染优化

// 虚拟列表（只渲染可视区域）
const visibleData = data.slice(start, end)

// 防止布局抖动
<div style="min-height: 200px"></div>

// 使用 transform 替代 top/left
transform: translateX(100px) // 触发 GPU 加速

4.4 缓存策略

强缓存（长期）
Cache-Control: max-age=31536000, immutable

协商缓存（短期）
Cache-Control: max-age=3600

本地存储
LocalStorage: 静态配置
SessionStorage: 临时数据
IndexedDB: 大量数据

5. 常用排查工具

5.1 Chrome DevTools

Network 面板

  • Waterfall 查看资源加载顺序
  • Size 查看资源大小
  • Timing 查看各阶段耗时

Performance 面板

  • 查看 FPS、FCP、LCP
  • 分析 Main 线程任务
  • 查看 Memory 变化

Lighthouse

  • 自动化性能评分
  • 提供优化建议

5.2 第三方工具

工具 用途
WebPageTest 在线性能测试
PageSpeed Insights Google 性能分析
GTmetrix 综合性能分析
BundleAnalyzer 打包分析
Webpack Bundle Analyzer 打包可视化

5.3 监控工具

// 性能监控
performance.mark('start')
// 执行代码
performance.mark('end')
performance.measure('operation', 'start', 'end')

// 上报到监控系统
navigator.sendBeacon('/api/perf', {
  lcp: lcpValue,
  cls: clsValue,
  fid: fidValue
})

总结

排查方向 核心思路
首屏慢 Network（资源大小/数量）+ Performance（DOM 解析）
白屏 Network（JS 报错）+ Console（JS 错误）
接口慢 TTFB（后端） + Download（数据量） + 调用频率
内存泄漏 Heap（GC 前后对比）+ Detached DOM 检查
卡顿 Performance（长任务）+ 任务拆分
布局偏移 Lighthouse CLS + 图片宽高 + 骨架屏

排查流程：

发现问题 → Chrome DevTools 分析
        ↓
   定位瓶颈
        ↓
   选择优化方案
        ↓
   实施优化
        ↓
   Lighthouse 验证