前端性能优化完全指南

性能指标

Core Web Vitals

• LCP (Largest Contentful Paint): <2.5s
• FID (First Input Delay): <100ms
• CLS (Cumulative Layout Shift): <0.1

加载优化

1. 代码分割

// 路由级别分割
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

// 组件级别分割
const HeavyComponent = lazy(() => import("./HeavyComponent"));

2. 图片优化

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

<!-- WebP 格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

3. 预加载关键资源

<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

<!-- 预加载关键 JS -->
<link rel="modulepreload" href="/critical.js">

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

渲染优化

1. 减少重排重绘

// ❌ 多次触发重排
element.style.width = "100px";
element.style.height = "200px";
element.style.padding = "10px";

// ✅ 批量修改
const style = {
  width: "100px",
  height: "200px",
  padding: "10px"
};
Object.assign(element.style, style);

2. 使用 CSS 动画代替 JS

/* ✅ CSS 动画（GPU 加速） */
.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

3. 虚拟列表

// 只渲染可见区域
function VirtualList({ items, itemHeight, containerHeight }) {
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const visibleItems = items.slice(scrollTop, scrollTop + visibleCount);
  
  return (
    <div style={{ height: items.length * itemHeight }}>
      {visibleItems.map(renderItem)}
    </div>
  );
}

网络优化

1. HTTP/2 或 HTTP/3

• 多路复用
• 头部压缩
• 服务器推送

2. CDN 加速

静态资源全部走 CDN，动态内容就近接入。

3. Gzip/Brotli 压缩

# Nginx 配置
gzip on;
gzip_types text/plain application/json application/javascript text/css;
brotli on;
brotli_types text/plain application/json application/javascript text/css;

工具推荐

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

优化效果对比

优化项	优化前	优化后	提升
首屏加载	5.2s	0.8s	85%
LCP	4.8s	1.2s	75%
包体积	2.5MB	450KB	82%

结语

性能优化是持续过程，不是一次性任务！