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

核心指标

• FCP (First Contentful Paint): 首次内容绘制
• LCP (Largest Contentful Paint): 最大内容绘制
• CLS (Cumulative Layout Shift): 累积布局偏移
• FID (First Input Delay): 首次输入延迟

资源优化

图片优化

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

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

代码分割

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

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

Tree Shaking

确保使用 ES6 模块语法，打包工具会自动移除未使用代码。

网络优化

HTTP/2

• 多路复用
• 头部压缩
• 服务器推送

CDN 加速

静态资源部署到 CDN，减少延迟。

预加载

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

渲染优化

减少重排重绘

// ❌ 差
el.style.width = "100px";
el.style.height = "100px";

// ✅ 好
el.style.cssText = "width: 100px; height: 100px;";

使用 CSS transforms

.animate {
  transform: translateX(100px);
  will-change: transform;
}

虚拟列表

长列表只渲染可见区域。

监控与分析

• Lighthouse 性能审计
• Web Vitals 监控
• 性能预算

性能优化是持续过程，需要不断测量和改进。