前端性能优化：从加载到渲染的全链路指南

1. 减少资源体积

代码压缩

# 使用 Terser 压缩 JavaScript
# 使用 cssnano 压缩 CSS

图片优化

• 使用 WebP/AVIF 格式
• 响应式图片（srcset）
• 懒加载非首屏图片

Tree Shaking

移除未使用的代码，减小打包体积。

2. 优化加载策略

代码分割

// 路由级代码分割
const Dashboard = lazy(() => import("./Dashboard"));

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

预加载关键资源

<link rel="preload" href="/font.woff2" as="font">
<link rel="prefetch" href="/next-page.js">

3. 渲染优化

减少重排重绘

• 使用 CSS transform 代替位置变化
• 批量 DOM 操作
• 避免频繁读取布局属性

虚拟列表

长列表只渲染可见区域：

<VirtualList 
  items={data} 
  itemHeight={50} 
  containerHeight={600} 
/>

4. 缓存策略

Service Worker

离线缓存，提升二次访问速度。

HTTP 缓存头

location ~* \.(js|css|png|jpg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

5. 性能监控

• Lighthouse 定期检测
• Real User Monitoring (RUM)
• Core Web Vitals 指标追踪

性能优化是持续过程，数据驱动决策。