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

# 前端性能优化实战指南

## 1. 资源加载优化

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

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

关键点：

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

1.2 资源压缩与CDN

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

优化策略：

• 图片使用WebP格式，配合<picture>标签降级
• 静态资源使用CDN加速
• 字体文件子集化

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';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const App = () => (
  <List height={600} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);

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;
    }
  };
}

3.2 Web Worker应用

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

// worker.js
self.onmessage = (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 openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore('data', { keyPath: 'id' });
    };
    
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = reject;
  });
};

5. 监控与持续优化

5.1 性能指标监控

// 使用Performance API
const [entry] = performance.getEntriesByName('first-contentful-paint');
console.log('FCP:', entry.startTime);

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

5.2 可视化工具

• Chrome DevTools Performance面板
• Lighthouse自动化测试
• WebPageTest多地点测试

6. 现代化优化方案

6.1 渐进式Web应用

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url