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

# 前端性能优化实战指南

## 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">

2. 渲染性能优化

2.1 虚拟列表实现

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

<List height={600} itemSize={35} itemCount={1000}>
  {Row}
</List>

2.2 避免强制同步布局

// 错误示例 - 触发强制布局
const width = element.offsetWidth;
element.style.width = width + 'px';

// 正确做法 - 使用requestAnimationFrame
requestAnimationFrame(() => {
  element.style.width = `${element.offsetWidth}px`;
});

2.3 CSS优化策略

/* 启用GPU加速 */
.transform-element {
  transform: translateZ(0);
}

/* 减少重绘区域 */
.will-change {
  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 = heavyCalculation(e.data);
  self.postMessage(result);
};

4. 缓存策略

4.1 Service Worker缓存

// 缓存关键资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js'
      ]);
    })
  );
});

4.2 本地存储优化

// 使用IndexedDB存储大量数据
const request = indexedDB.open('MyDatabase');

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('store', 'readwrite');
  const store = transaction.objectStore('store');
  store.put(data, 'key');
};

5. 监控与分析

5.1 性能指标采集

// 获取关键性能指标
const { loadEventEnd, navigationStart } = performance.timing;
const pageLoadTime = loadEventEnd - navigationStart;

// 使用PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration);
  }
});
observer.observe({ entryTypes: ['longtask'] });

5.2 Lighthouse优化建议

# 生成性能报告
lighthouse https://example.com --view

6. 现代化技术方案

6.1 渐进式Web应用

// manifest.json
{
  "name": "My PWA",
  "start_url": "/",
  "display": "standalone"
}

6.2 WASM应用

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

7. 移动端专项优化

7.1 触摸事件优化

// 使用passive事件监听器
element.addEventListener('touchmove', onTouchMove, { passive: true });

7.2 首屏加速方案

<!-- 使用骨架屏 -->
<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-content"></div>
</div>

8. 构建优化

8.1 Tree Shaking