前端性能优化实战清单

一、加载优化

1. 图片懒加载：loading="lazy" 原生支持；首屏大图用 fetchpriority="high"
2. 现代格式：WebP/AVIF 相比 JPEG 体积减少 30%-50%
3. 字体优化：font-display: swap + 只加载用到的字重
4. 代码分割：路由级 dynamic import，第三方库按需引入

// React/Next.js 组件级分割
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  ssr: false,
  loading: () => <ChartSkeleton />,
});

二、渲染优化

1. 列表虚拟化：长列表只渲染可视区域（react-window / virtua）
2. 防抖节流：搜索输入 300ms 防抖，滚动 16ms 节流
3. content-visibility: auto：让浏览器跳过屏幕外渲染

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: 200px; /* 占位高度 */
}

三、核心指标

四、排查工具

• Lighthouse：一键全量体检
• Performance 面板：火焰图找长任务
• WebPageTest：多地域真实设备
• navigator.scheduling.isInputPending：拆分长任务

小结

性能优化三板斧：先测量（Lighthouse/Performance）→ 找瓶颈（网络 or 渲染）→ 针对性优化。不要凭感觉优化，数据说话。