前端性能优化：从加载速度到运行时性能

加载性能优化

1. 资源压缩与合并

# 使用构建工具
npm run build  # Webpack/Vite 自动压缩

# 图片优化
# - 使用 WebP 格式
# - 响应式图片 srcset
# - 懒加载
<img src="image.webp" loading="lazy" alt="...">

2. 代码分割

// 路由级别分割
const Dashboard = lazy(() => import("./Dashboard"));

// 组件级别分割
const HeavyComponent = lazy(() => import("./HeavyComponent"));

// 动态导入
button.onClick = () => import("./module").then(m => m.doSomething());

3. 预加载策略

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

<!-- 预获取可能需要的资源 -->
<link rel="prefetch" href="/next-page.js">

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

运行时性能优化

1. 避免强制同步布局

// ❌ 强制同步布局
box.style.width = "100px";
const width = box.offsetWidth; // 强制重新计算

// ✅ 批量读取和写入
const width = box.offsetWidth;
box.style.width = "100px";

2. 使用 requestAnimationFrame

// ❌ 使用 setTimeout
setTimeout(() => {
  animate();
}, 16);

// ✅ 使用 requestAnimationFrame
requestAnimationFrame(() => {
  animate();
});

3. 虚拟列表

// 长列表只渲染可见部分
<VirtualList
  height={600}
  itemCount={10000}
  itemSize={50}
  renderItem={renderItem}
/>

性能监控

// Core Web Vitals
import { onLCP, onFID, onCLS } from "web-vitals";

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

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

总结

前端性能优化是一个持续的过程。从加载优化到运行时性能，每个环节都值得关注和优化。使用工具监控，持续改进用户体验。