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

为什么性能重要？

• 53% 的用户会离开加载超过 3 秒的页面
• 每增加 100ms 延迟，转化率下降 7%
• 性能影响 SEO 排名

1. 资源加载优化

代码分割

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

// 动态导入
const module = await import("./module");

预加载关键资源

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

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

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

图片优化

<!-- 响应式图片 -->
<img src="small.jpg" 
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     loading="lazy"
     alt="描述">

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

2. 渲染优化

避免布局抖动

// ❌ 糟糕：多次读取布局属性
for (let i = 0; i < items.length; i++) {
  items[i].style.left = items[i].offsetLeft + 10 + "px";
}

// ✅ 优化：批量读取后批量写入
const offsets = items.map(item => item.offsetWidth);
items.forEach((item, i) => {
  item.style.left = offsets[i] + 10 + "px";
});

使用 CSS containment

.container {
  contain: layout style paint;
}

虚拟列表

对于长列表，只渲染可见部分：

// 使用 react-window 或 vue-virtual-scroller
import { FixedSizeList } from "react-window";

3. 缓存策略

Service Worker

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

HTTP 缓存头

Cache-Control: public, max-age=31536000, immutable
ETag: "abc123"

4. 性能监控

Core Web Vitals

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

// 使用 web-vitals 库
import { getLCP, getFID, getCLS } from "web-vitals";

getLCP(console.log);
getFID(console.log);
getCLS(console.log);

5. 构建优化

• Tree Shaking 移除未用代码
• 压缩代码（Terser）
• 压缩资源（gzip/brotli）
• 使用 CDN 分发

总结

性能优化是持续过程。测量 → 优化 → 再测量，形成闭环！