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

# 前端性能优化实战指南

## 1. 资源加载优化

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

1.2 资源压缩与CDN

• 使用Webpack的TerserPlugin压缩JS
• 配置Gzip/Brotli压缩
• 静态资源使用CDN加速

1.3 预加载关键资源

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

2. 渲染性能优化

2.1 减少重排重绘

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

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

container.appendChild(fragment);

2.2 虚拟列表优化长列表

// React中使用react-window
import { FixedSizeList as List } from 'react-window';

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

2.3 使用CSS硬件加速

.transform-element {
  transform: translateZ(0);
  will-change: transform;
}

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.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

3.3 避免内存泄漏

// 清除事件监听
useEffect(() => {
  const handleResize = () => {};
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

4. 网络请求优化

4.1 请求合并与缓存

// 使用GraphQL合并请求
// 或实现API聚合层

4.2 服务端渲染(SSR)

// Next.js示例
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

4.3 HTTP/2与服务器推送

# Nginx配置HTTP/2
listen 443 ssl http2;

5. 监控与持续优化

5.1 性能指标监控

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

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

5.2 Chrome DevTools分析

• 使用Performance面板记录运行时性能
• Lighthouse生成优化建议
• Coverage面板分析未使用代码

5.3 A/B测试优化方案

// 通过特性开关控制优化策略
if (featureFlags.enableNewOptimization) {
  applyNewOptimization();
}

6. 移动端专项优化

6.1 首屏秒开方案

• 使用骨架屏
• 关键CSS内联
• 图片懒加载

6.2 离线化策略

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

6.3 手势优化

/* 禁用触摸高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

7. 构建优化

7.1 Tree Shaking

// Webpack配置
optimization: {
  usedExports: true,
}

7.2 持久化缓存