前端性能优化完整指南

· 阅读约需6分钟

前言

前端性能直接影响用户体验和业务转化率。研究表明，页面加载每延迟1秒，转化率下降7%。本文将分享完整的前端性能优化方案，涵盖网络、资源、渲染、运行时四个维度。

一、网络层面优化

1.1 减少HTTP请求

合并CSS/JS文件，使用雪碧图，小图片转Base64内联。减少第三方脚本数量，避免不必要的请求。

1.2 使用CDN加速

静态资源使用CDN分发，就近访问降低延迟，同时分担源站压力，提供天然缓存机制。

1.3 启用压缩

配置Gzip或Brotli压缩，HTML/CSS/JS压缩率可达60-80%。

1.4 升级HTTP/2

支持多路复用、头部压缩、服务器推送，显著提升并发请求效率。

二、资源加载优化

2.1 图片优化

格式选择：

  • JPEG：照片、复杂图像
  • PNG：图标、透明图
  • WebP：现代浏览器，比JPEG小25-35%
  • SVG：矢量图形，无限缩放

响应式图片：


<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

懒加载：使用原生loading="lazy"或Intersection Observer API实现。

2.2 JavaScript优化

代码分割：

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

// 条件加载
button.addEventListener('click', async () => {
  const modal = await import('./Modal');
});

Tree Shaking：按需导入，避免导入整个库。

defer/async：合理使用脚本加载属性。

2.3 CSS优化

关键CSS内联，非关键CSS异步加载；减少选择器复杂度，避免深层次嵌套。

三、渲染性能优化

3.1 关键渲染路径

减少关键资源数量和大小，缩短关键路径长度。内联关键CSS，延迟非关键JS。

3.2 避免布局抖动

避免读写交替导致强制同步布局，批量读写操作。

3.3 虚拟列表

长列表只渲染可视区域内的元素，大幅提升渲染性能。

四、运行时性能优化

4.1 防抖与节流

function debounce(fn, delay = 300) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

function throttle(fn, interval = 300) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn(...args);
    }
  };
}

4.2 Web Worker

大数据计算、复杂算法使用Web Worker，避免阻塞主线程。

4.3 内存泄漏预防

及时清除定时器、事件监听器，避免脱离DOM的引用。

五、性能监控

Core Web Vitals

  • LCP < 2.5s：最大内容绘制
  • FID < 100ms：首次输入延迟
  • CLS < 0.1：累积布局偏移

使用Lighthouse进行全面审计，建立性能预算，持续监控。

结语

前端性能优化是系统性工程，没有银弹。先测量，再优化，最后验证效果。在性能和功能间找到平衡，数据驱动持续改进。