前端性能优化 SOP
标准化的性能问题排查和优化流程。 📄 查看已填写示例
一、性能问题发现
1.1 用户反馈
- 页面加载慢
- 操作卡顿
- 动画不流畅
- 白屏/长时间 loading
1.2 监控告警
- LCP > 2.5s
- INP > 200ms
- CLS > 0.1
- 接口成功率下降
- 转化率下降
1.3 主动测试
- Lighthouse 跑分
- WebPageTest
- Chrome DevTools Performance Panel
- 真实用户监控（RUM）
二、问题定位
2.1 确定问题类型
| 现象 | 可能原因 |
|---|---|
| 首屏慢 | 资源大、请求多、渲染阻塞、服务端响应慢 |
| 交互卡顿 | 长任务、频繁重渲染、主线程阻塞 |
| 布局抖动 | 频繁读写 DOM、未使用 transform |
| 内存泄漏 | 闭包、事件监听未清理、全局变量 |
2.2 使用工具定位
- Network 面板：分析请求大小、数量、瀑布流。
- Performance 面板：分析长任务、主线程阻塞、渲染流程。
- Lighthouse：获取优化建议。
- Memory 面板：分析内存泄漏。
- Coverage 面板：分析未使用代码。
三、优化措施
3.1 加载优化
- [ ] 压缩和合并资源
- [ ] 使用 CDN
- [ ] 启用 HTTP/2 或 HTTP/3
- [ ] 懒加载图片和组件
- [ ] 代码分割（Code Splitting）
- [ ] 预加载关键资源
- [ ] 使用 Tree Shaking 移除未使用代码
- [ ] 服务端渲染（SSR）或静态生成（SSG）
3.2 渲染优化
- [ ] 减少 DOM 操作
- [ ] 使用虚拟滚动处理长列表
- [ ] 避免强制同步布局
- [ ] 使用 CSS transform 代替位置变化
- [ ] 使用 requestAnimationFrame 做动画
- [ ] 组件级 memoization
3.3 网络优化
- [ ] 接口聚合，减少请求次数
- [ ] 合理设置缓存策略
- [ ] 使用 HTTP 缓存头
- [ ] 接口压缩（gzip/brotli）
- [ ] 图片格式优化（WebP/AVIF）
3.4 运行时优化
- [ ] 长任务拆分到 Web Worker
- [ ] 防抖和节流
- [ ] 避免内存泄漏
- [ ] 及时清理定时器和事件监听
四、验证优化效果
- [ ] 本地复测 Lighthouse 分数
- [ ] 在 Performance 面板确认瓶颈消除
- [ ] 灰度发布后对比 Core Web Vitals
- [ ] 监控真实用户数据（RUM）
- [ ] 对比业务指标（转化率、跳出率）
五、文档与复盘
- [ ] 记录优化前后数据
- [ ] 记录采用的优化手段
- [ ] 更新团队性能优化知识库
- [ ] 分享经验给团队
使用说明：遇到性能问题时，按本 SOP 逐项排查和优化。