前端性能优化实战指南

#performance#optimization#frontend
前端性能优化实战指南

为什么性能很重要

性能直接影响用户体验和转化率。研究表明：

  • 页面加载时间每增加 1 秒，转化率下降 7%
  • 移动用户中 53% 会在页面加载超过 3 秒时离开
  • 良好的性能表现能提升 SEO 排名

加载性能优化

1. 资源压缩

使用现代构建工具自动压缩代码：

// vite.config.js
export default {
  build: {
    minify: 'esbuild',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
};

2. 代码分割

按路由或组件懒加载：

// 路由级代码分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

// 组件级代码分割
const HeavyComponent = lazy(() => import('./HeavyComponent'));

3. 图片优化

  • 使用 WebP/AVIF 格式
  • 实现响应式图片
  • 启用懒加载
<img
  src="image.webp"
  srcset="image-480.webp 480w, image-800.webp 800w"
  loading="lazy"
  decoding="async"
/>

运行时性能优化

1. 虚拟列表

处理大量数据时，只渲染可视区域的内容：

import { useVirtualList } from 'ahooks';

const { list, wrapperProps, outerRef } = useVirtualList(data, {
  count: 10,
  itemHeight: 50
});

2. 防抖与节流

减少高频事件的触发次数：

// 防抖：停止触发后执行
const debouncedSearch = debounce((query) => {
  api.search(query);
}, 300);

// 节流：固定间隔执行
const throttledScroll = throttle(() => {
  updateScrollProgress();
}, 100);

3. 缓存策略

利用浏览器缓存和 CDN 加速：

Cache-Control: public, max-age=31536000, immutable

性能监控

使用 Web Vitals 监控核心指标：

  • LCP (Largest Contentful Paint)：最大内容绘制
  • FID (First Input Delay)：首次输入延迟
  • CLS (Cumulative Layout Shift)：累计布局偏移
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

总结

性能优化是一个持续的过程，需要：

  1. 建立性能预算
  2. 持续监控指标
  3. 定期审查代码
  4. 使用自动化工具

记住：最快的代码是不运行的代码。