技术 2025年10月22日

前端性能优化实战指南

从加载速度到运行性能，全面讲解前端优化的实战技巧。包括资源压缩、代码分割、懒加载、缓存策略、渲染优化等，打造极致用户体验。

性能优化的价值

性能就是用户体验。研究表明，页面加载时间每增加1秒，转化率下降7%。

优化不是一次性工作，而是持续的过程。

加载性能优化

1. 资源体积控制

代码压缩：

// webpack配置
optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()]
}

图片优化：

使用 WebP 格式（比 JPEG 小25-35%）
响应式图片，根据设备加载合适尺寸
懒加载非首屏图片

<img src="image.webp" 
     srcset="image-400.webp 400w, image-800.webp 800w"
     loading="lazy" 
     alt="描述">

Gzip/Brotli 压缩：服务器启用压缩，文本资源可减少70%体积。

2. 代码分割与懒加载

路由级分割：

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

组件级懒加载：

const HeavyChart = lazy(() => import('./components/HeavyChart'));

预加载关键资源：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js">

3. 缓存策略

Service Worker 缓存：

// 缓存静态资源
workbox.routing.registerRoute(
  ({request}) => request.destination === 'image',
  new workbox.strategies.CacheFirst({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeDays: 30
      })
    ]
  })
);

CDN 加速：

静态资源部署到 CDN
利用浏览器 HTTP/2 多路复用

运行时性能优化

1. 减少重排重绘

避免频繁操作 DOM：

// 不推荐
for (let i = 0; i < 1000; i++) {
  element.style.left = i + 'px';
}

// 推荐：使用 requestAnimationFrame
let i = 0;
function move() {
  if (i < 1000) {
    element.style.left = i + 'px';
    i++;
    requestAnimationFrame(move);
  }
}

使用 CSS Transform： transform 和 opacity 不会触发重排。

2. 虚拟列表

长列表使用虚拟滚动，只渲染可视区域：

// react-window 示例
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={500}
  itemCount={10000}
  itemSize={50}
>
  {Row}
</FixedSizeList>

3. Web Worker 卸载计算

复杂计算移到 Worker，不阻塞主线程：

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });

// worker.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};