Q9 · 通用优化策略
性能优化有哪些思路？说说你了解的性能优化手段？
⚡ 速记答案（30 秒）
- 网络：压缩（Gzip/Brotli）、CDN、缓存策略、HTTP/2、多路复用
- 资源：代码分割、按需加载、Tree-shaking、图片/字体优化
- 渲染：减少重排重绘、使用虚拟列表、节流防抖、合理使用动画
- 交互：避免长任务、懒加载不可见组件
- 架构：SSR/SSG、微前端拆分大应用
- 监控：埋点、性能平台、A/B 实验，持续迭代
📖 详细讲解
性能优化全景图
1. 加载阶段
| 优化点 | 手段 |
|---|---|
| 减少体积 | 压缩、Tree-shaking、代码分割 |
| 减少请求 | 合并资源、使用雪碧图、按需加载 |
| 加速传输 | CDN、HTTP/2、Gzip/Brotli |
| 利用缓存 | 强缓存、协商缓存、Service Worker |
2. 运行阶段
| 优化点 | 手段 |
|---|---|
| 减少重绘重排 | 批量 DOM 操作、CSS 动画用 transform |
| 避免长任务 | 拆分任务、Web Worker |
| 控制渲染 | 虚拟列表、懒加载、节流防抖 |
3. 感知阶段
| 优化点 | 手段 |
|---|---|
| 骨架屏 | 减少白屏感 |
| 渐进加载 | 图片渐进式加载 |
| 乐观更新 | 先更新 UI，后同步数据 |
面试要点
回答时按维度分层讲，每个维度举 1-2 个你实际用过的例子。
面试技巧：回答性能问题时，先说指标和标准，再讲优化手段，最后结合实际项目经验。