前端性能优化 Checklist

页面性能直接影响用户体验。本文整理前端优化清单。

加载优化

• 启用 Gzip/Brotli 压缩
• 使用 CDN 加速静态资源
• 图片懒加载
• 代码分割和按需加载
• 预加载关键资源

渲染优化

• 减少重排重绘
• 使用 CSS transform 代替位置动画
• 避免布局抖动
• 虚拟列表优化长列表

资源优化

<!-- 图片优化 -->
<img src="image.webp" loading="lazy" alt="">

<!-- 预加载 -->
<link rel="preload" href="font.woff2" as="font">

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

监控指标

• FCP (首次内容绘制) < 1.5s
• LCP (最大内容绘制) < 2.5s
• CLS (累积布局偏移) < 0.1

持续优化可以显著提升用户体验。