如何提高前端应用的性能？

2025-06-04 34 阅读2分钟

# 前端性能优化实战指南

## 1. 资源加载优化

### 1.1 代码拆分与懒加载
```javascript
// React 动态导入示例
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

使用 Webpack 的 SplitChunksPlugin 自动拆分代码
路由级懒加载减少初始包体积
关键资源预加载：<link rel="preload">

1.2 资源压缩与缓存

# Nginx 配置示例
gzip on;
gzip_types text/plain text/css application/json application/javascript;

启用 Brotli/Gzip 压缩
静态资源添加长期缓存：[name].[contenthash].js
图片使用 WebP 格式并设置合适尺寸

2. 渲染性能优化

2.1 减少重绘与回流

// 批量DOM操作示例
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
list.appendChild(fragment);

使用 CSS transform 代替 top/left 动画
避免在循环中读取布局属性（如 offsetWidth）
使用 will-change 提示浏览器优化

2.2 虚拟列表优化长列表

// React-Window 示例
import { FixedSizeList as List } from 'react-window';

<List
  height={600}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => <div style={style}>Item {index}</div>}
</List>

只渲染可视区域内的元素
避免使用内联函数作为 props
复杂组件使用 React.memo

3. JavaScript 执行优化

3.1 防抖与节流

// 节流函数实现
function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

滚动/拖拽等高频事件必须使用节流
搜索输入建议使用防抖（300ms左右）
避免在循环中进行复杂计算

3.2 Web Worker 处理密集型任务

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = e => updateUI(e.data);

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

将图像处理/大数据分析等任务移出主线程
使用 Comlink 简化 Worker 通信
注意 Worker 初始化开销

4. 监控与持续优化

4.1 性能指标采集

// 使用 web-vitals 库
import { getLCP, getFID, getCLS } from 'web-vitals';

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

核心 Web 指标监控：LCP/FID/CLS
使用 Performance API 获取详细时序数据
建立性能基准测试流程

4.2 渐进式优化策略

首屏关键CSS内联
非关键JS使用async/defer
实现骨架屏提升感知性能
服务端渲染(SSR)或静态生成(SSG)

5. 进阶优化手段

5.1 Service Worker 缓存策略

// 缓存优先策略
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

实现离线可用功能
缓存API响应数据
注意缓存失效策略

5.2 WASM 性能关键路径

// 加载WASM模块
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(obj => obj.instance.exports.compute());

将性能敏感算法移植到WASM
注意JS-WAS