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

# 前端性能优化实战指南

## 1. 资源加载优化

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

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

关键点：

• 使用Webpack的SplitChunksPlugin进行代码分割
• 路由级懒加载减少初始包体积
• 非关键资源延迟加载

1.2 资源压缩与CDN

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

最佳实践：

• 所有静态资源启用Brotli/Gzip压缩
• 关键CSS内联到HTML头部
• 第三方库使用CDN加速

2. 渲染性能优化

2.1 虚拟列表优化长列表

// 使用react-window实现虚拟滚动
import { FixedSizeList as List } from 'react-window';

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

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

2.2 避免强制同步布局

// 错误示例：触发强制同步布局
function resizeAllParagraphs() {
  const paragraphs = document.querySelectorAll('p');
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + 'px';
  }
}

// 正确做法：先读后写
function resizeAllParagraphs() {
  const width = box.offsetWidth;
  const paragraphs = document.querySelectorAll('p');
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = width + 'px';
  }
}

3. 内存与CPU优化

3.1 事件监听优化

// 使用事件委托
document.getElementById('parent').addEventListener('click', function(e) {
  if(e.target && e.target.matches('button.item')) {
    // 处理具体按钮点击
  }
});

3.2 Web Worker处理密集型任务

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* 处理结果 */ };

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

4. 监控与持续优化

4.1 性能指标采集

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

// 关键指标
const timing = performance.timing;
const TTI = timing.domInteractive - timing.navigationStart;

4.2 Chrome DevTools使用技巧

1. 使用Coverage标签分析未使用代码
2. Performance面板记录运行时性能
3. Memory面板检测内存泄漏

5. 进阶优化策略

5.1 Service Worker缓存策略

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

5.2 WASM性能关键路径

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

实施建议

1. 使用Lighthouse进行量化评估
2. 建立性能预算（如主包不超过200KB）
3. CI流程中加入性能检查
4. A/B测试优化效果

通过组合应用这些技术，通常可将页面加载速度提升50%以上，交互响应时间减少30%。记住：性能优化是持续过程，需要定期测量和迭代改进。