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

资源加载优化

代码分割

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

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

资源预加载

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

图片优化

• 使用 WebP/AVIF 格式
• 懒加载：loading="lazy"
• 响应式图片：srcset

渲染优化

减少重排重绘

• 避免频繁读取布局属性
• 使用 transform 代替 top/left
• 批量 DOM 操作

虚拟列表

长列表只渲染可见区域，大幅提升滚动性能。

缓存策略

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

性能监控

• Core Web Vitals 指标
• Lighthouse 定期检测
• 真实用户监控 (RUM)

性能优化是持续过程，需要度量和迭代。