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

# 前端性能优化实战指南

## 1. 资源加载优化

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

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

关键点：

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

1.2 资源压缩与CDN

# Nginx配置Gzip压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript;

优化策略：

• 图片使用WebP格式并设置合适尺寸
• 静态资源部署到CDN节点
• 开启Brotli压缩（比Gzip高15-20%压缩率）

2. 渲染性能优化

2.1 减少重排重绘

// 批量DOM操作
const container = document.getElementById('app');
const fragment = document.createDocumentFragment();

items.forEach(item => {
  const el = document.createElement('div');
  fragment.appendChild(el);
});

container.appendChild(fragment);

优化技巧：

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

2.2 虚拟列表优化

// React虚拟列表实现
import { FixedSizeList as List } from 'react-window';

<List
  height={400}
  itemCount={1000}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

3. JavaScript优化

3.1 防抖与节流

// 防抖实现
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

3.2 Web Worker应用

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

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

4. 缓存策略

4.1 Service Worker缓存

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

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

4.2 数据缓存

// IndexedDB缓存示例
const dbPromise = idb.open('app-store', 1, upgradeDB => {
  upgradeDB.createObjectStore('keyval');
});

const idbKeyval = {
  get(key) {
    return dbPromise.then(db => 
      db.transaction('keyval').objectStore('keyval').get(key)
    );
  }
};

5. 监控与持续优化

5.1 性能指标采集

// 使用Performance API
const timing = performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;

// Core Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime, entry.duration);
  }
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

5.2 A/B测试优化

// 特性开关实现
const features = {
  newRendering: localStorage.getItem('feature:new-rendering') === 'true'
};

if (features.newRendering) {
  import('./newRenderer');
}

最佳实践总结

1. 关键指标优先级：

   • 首次内容渲染(FCP) < 1s
   • 最大内容绘制(LCP) < 2.5s
   • 首次输入延迟(FID) < 100ms
   • 累计布局偏移(CLS) < 0.1

2. 渐进式增强策略：

   • 核心功能优先加载
   • 非