前端性能优化：从 3 秒到 300 毫秒

页面加载慢 1 秒，转化率下降 7%。本文分享实战中验证有效的性能优化技巧。

第一步：测量现状

# Chrome DevTools
Lighthouse -> Performance

# 核心指标
- LCP (最大内容绘制): < 2.5s
- FID (首次输入延迟): < 100ms
- CLS (累计布局偏移): < 0.1

图片优化（效果最明显）

1. 格式选择

WebP: 比 JPEG 小 30%
AVIF: 比 WebP 再小 20%
SVG: 图标和简单图形

2. 懒加载

<!-- 原生懒加载 -->
<img src="image.jpg" loading="lazy" alt="...">

<!-- 响应式图片 -->
<img 
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  src="large.jpg"
>

3. 压缩工具

# 在线工具
TinyPNG, Squoosh

# CLI 工具
imagemin -i src -o dist

代码分割

路由级别分割

// React
const Dashboard = lazy(() => import("./Dashboard"));
const Settings = lazy(() => import("./Settings"));

// Vue
const Dashboard = () => import("./Dashboard.vue");

组件级别分割

// 大组件单独打包
const HeavyChart = lazy(() => import("./HeavyChart"));

// 只在需要时加载
{isOpen && <HeavyChart />}

资源预加载

<!-- 预连接 CDN -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 预加载关键资源 -->
<link rel="preload" href="/font.woff2" as="font">

<!-- 预获取下一页资源 -->
<link rel="prefetch" href="/next-page.js">

缓存策略

HTTP 缓存头

# 静态资源（带 hash）
Cache-Control: public, max-age=31536000, immutable

# HTML 文件
Cache-Control: no-cache

# API 响应
Cache-Control: private, max-age=0

Service Worker

// 缓存策略
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(res => res || fetch(event.request))
  );
});

减少重绘重排

❌ 糟糕做法

// 多次触发重排
element.style.width = "100px";
element.style.height = "200px";
element.style.color = "red";

✅ 优化做法

// 批量修改
element.style.cssText = "width:100px;height:200px;color:red";

// 或使用类名
element.classList.add("active");

虚拟列表（大数据）

// 只渲染可见区域
<VirtualList
  height={600}
  itemCount={10000}
  itemSize={50}
>
  {ItemComponent}
</VirtualList>

打包优化

// webpack 配置
module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors"
        }
      }
    },
    minimize: true
  }
};

实际效果

优化前：

• 首屏加载：3.2s
• 总资源：2.8MB
• 请求数：86

优化后：

• 首屏加载：280ms
• 总资源：420KB
• 请求数：23

提升 11 倍！

总结

性能优化优先级：

1. 图片优化（效果最大）
2. 代码分割
3. 缓存策略
4. 减少请求
5. 打包优化

记住：先测量，再优化。