前端性能优化的 10 个实用技巧

1. 图片优化

• 使用 WebP 格式（比 JPEG 小 30%）
• 懒加载：<img loading="lazy">
• 响应式图片：srcset 属性
• 使用 CDN 托管

2. 代码分割

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

3. 减少 HTTP 请求

• 合并小文件
• 使用雪碧图
• 内联关键 CSS

4. 启用缓存

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

5. 压缩资源

• Gzip/Brotli 压缩
• 移除未使用的 CSS（PurgeCSS）
• 压缩图片（TinyPNG）

6. 预加载关键资源

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

7. 减少重排重绘

• 避免频繁操作 DOM
• 使用 transform 代替 top/left
• 批量 DOM 操作

8. 使用虚拟列表

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

9. 防抖节流

// 防抖 - 搜索框
const debounce = (fn, delay) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
};

10. 监控性能指标

• FCP（首次内容绘制）< 1.8s
• LCP（最大内容绘制）< 2.5s
• CLS（累积布局偏移）< 0.1

使用 Lighthouse 定期检测！