前端性能优化实战

为什么性能重要？

页面加载每慢 1 秒，转化率下降 7%。性能直接影响用户体验和业务指标。

核心优化指标

• FCP: 首次内容绘制
• LCP: 最大内容绘制
• CLS: 累积布局偏移
• FID: 首次输入延迟

优化策略

1. 代码分割

// 路由懒加载
const About = lazy(() => import("./About"));

// 组件懒加载
const HeavyComponent = lazy(() => import("./HeavyComponent"));

2. 图片优化

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

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

3. 资源预加载

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

4. 缓存策略

// Service Worker 缓存
self.addEventListener("fetch", (event) => {
  event.respondWith(cacheFirst(event.request));
});

工具推荐

• Lighthouse
• WebPageTest
• Chrome DevTools

总结

性能优化是持续过程，需要监控、测量、迭代。