前端性能优化实战：从 5 秒到 0.5 秒的蜕变

性能指标核心

• FCP (First Contentful Paint): 首次内容绘制 < 1.8s
• LCP (Largest Contentful Paint): 最大内容绘制 < 2.5s
• CLS (Cumulative Layout Shift): 累积布局偏移 < 0.1
• TTI (Time to Interactive): 可交互时间 < 3.8s

图片优化

选择合适的格式

<!-- 使用 WebP 格式，体积减少 30% -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

懒加载

<img src="image.jpg" loading="lazy" alt="description">

<!-- 或使用 Intersection Observer -->
<script>
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});
</script>

代码分割

路由懒加载

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

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

组件按需加载

// 只加载需要的组件
import { Button } from "antd";
// 而不是
import * as Antd from "antd";

资源预加载

<!-- 预加载关键资源 -->
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page.js">

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

缓存策略

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

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

减少重绘重排

/* ✅ 使用 transform 代替 top/left */
.element {
  transform: translate(100px, 100px);
}

/* ❌ 会触发重排 */
.element {
  top: 100px;
  left: 100px;
}

性能监控

// 使用 Performance API
performance.getEntriesByType("navigation")[0];

// 上报核心指标
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.name, entry.startTime);
  });
});
observer.observe({ entryTypes: ["paint", "largest-contentful-paint"] });

优化清单

• 图片压缩 + WebP
• 代码分割 + 懒加载
• 开启 Gzip/Brotli
• 使用 CDN
• 减少 HTTP 请求
• 优化关键渲染路径
• 移除未使用代码

结语

性能优化是持续过程。测量 → 优化 → 再测量，循环迭代！