前端性能优化：从 5 秒到 1 秒的实战

性能指标

指标	含义	优秀标准
FCP	首次内容绘制	< 1.8s
LCP	最大内容绘制	< 2.5s
CLS	累积布局偏移	< 0.1
TTI	可交互时间	< 3.8s

优化策略

1. 代码分割

// ❌ 全部打包
import { ComponentA, ComponentB } from "./components";

// ✅ 懒加载
const ComponentA = lazy(() => import("./ComponentA"));
const ComponentB = lazy(() => import("./ComponentB"));

2. 图片优化

<!-- 响应式图片 -->
<img 
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="描述"
/>

格式选择：

• WebP：比 JPEG 小 30%
• AVIF：最新格式，压缩率更高
• SVG：图标和简单图形

3. 缓存策略

# 静态资源长期缓存
location ~* \.(js|css|png|jpg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML 不缓存
location ~* \.html$ {
  expires -1;
  add_header Cache-Control "no-cache";
}

4. 减少重绘重排

/* ❌ 触发重排 */
.element {
  width: 100px;
}
.element:hover {
  width: 200px; /* 重排 */
}

/* ✅ 只触发重绘 */
.element {
  transform: scale(1);
}
.element:hover {
  transform: scale(1.2); /* GPU 加速 */
}

5. 虚拟列表

// 只渲染可见区域
function VirtualList({ items, itemHeight }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.floor(scrollTop / itemHeight);
  const visibleItems = items.slice(startIndex, startIndex + 20);
  
  return (
    <div onScroll={e => setScrollTop(e.target.scrollTop)}>
      {visibleItems.map(item => <Item key={item.id} {...item} />)}
    </div>
  );
}

工具推荐

• Lighthouse：综合性能评分
• WebPageTest：多地点测试
• Chrome DevTools：Performance 面板
• Bundle Analyzer：分析打包体积

实际案例

优化前：

• 首屏加载：5.2s
• 总资源：3.5MB
• 请求数：85

优化后：

• 首屏加载：1.1s
• 总资源：450KB
• 请求数：22

优化手段：

1. 代码分割减少 60% 初始包体积
2. 图片转 WebP 减少 70% 图片体积
3. 开启 Gzip 压缩
4. CDN 加速静态资源
5. 预加载关键资源

结语

性能优化是持续过程，建立监控体系，定期审查和改进。