前端性能优化：10 个立竿见影的技巧

页面速度直接影响用户体验和转化率。分享 10 个快速见效的优化技巧。

1. 图片优化

• 使用 WebP 格式
• 懒加载（loading="lazy"）
• 响应式图片（srcset）

2. 代码分割

// 动态导入
const Module = () => import("./Module");

3. 减少 HTTP 请求

• 合并小文件
• 使用雪碧图
• 内联关键 CSS

4. 启用缓存

• 设置 Cache-Control
• 使用 ETag
• Service Worker 缓存

5. CDN 加速

静态资源全部走 CDN。

6. 压缩资源

• Gzip/Brotli 压缩
• 移除无用代码（Tree Shaking）
• 压缩图片

7. 预加载关键资源

<link rel="preload" href="/font.woff2" as="font">

8. 减少重排重绘

• 避免频繁操作 DOM
• 使用 transform 代替 top/left
• 批量更新

9. 虚拟列表

长列表只渲染可见区域。

10. 监控性能

• Lighthouse 定期检测
• 真实用户监控（RUM）
• 设置性能预算

优化是持续过程，先测量再优化！