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

# 前端应用性能优化实战指南

## 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" as="script">

2. 渲染性能优化

2.1 减少重绘与回流

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
  fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment);

2.2 使用CSS硬件加速

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

2.3 虚拟列表优化长列表

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

<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) => handleResult(e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(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 合理使用LocalStorage

// 带过期时间的缓存
function setWithExpiry(key, value, ttl) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + ttl,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

5. 监控与分析

5.1 性能指标采集

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

// 关键性能指标
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});
observer.observe({entryTypes: ['paint', 'largest-contentful-paint']});

5.2 Lighthouse自动化测试

# 安装Lighthouse
npm install -g lighthouse

# 运行测试
lighthouse https://example.com --view

6. 现代框架优化技巧

6.1 React性能优化

// 使用React.memo
const MemoComponent = React.memo(function MyComponent(props) {
  /* 渲染逻辑 */
});

// 使用useMemo/useCallback
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6.2 Vue优化策略

// 组件懒加载
const AsyncComponent = () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  delay: 200
});

// v-once静态内容
<div v-once>{{ staticContent }}</div>

7. 移动端专项优化

7.1 首屏加速方案

• 关键CSS内联
• 骨架屏预渲染
• 图片懒加载与自适应

7.2 手势优化