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

# 前端性能优化实战指南

## 1. 资源加载优化
- **代码分割**：使用Webpack的SplitChunksPlugin进行代码拆分，按需加载路由组件
```javascript
// 动态导入组件
const Home = () => import('./views/Home.vue')

• 预加载关键资源：使用<link rel="preload">提前加载关键CSS/字体

<link rel="preload" href="critical.css" as="style">

• CDN加速：将静态资源部署到CDN，减少网络延迟

2. 渲染性能优化

• 虚拟列表：长列表使用react-window或vue-virtual-scroller

// React示例
import { FixedSizeList } from 'react-window'
<List height={600} itemSize={50} itemCount={1000}>
  {Row}
</List>

• 避免强制同步布局：批量读取DOM属性后再统一修改

// 不良实践（导致布局抖动）
for (let i = 0; i < items.length; i++) {
  items[i].style.width = `${box.offsetWidth}px`
}

// 优化后
const width = box.offsetWidth
items.forEach(item => item.style.width = `${width}px`)

3. 内存管理

• 及时解绑事件：组件销毁时移除事件监听

// React示例
useEffect(() => {
  const handler = () => {}
  window.addEventListener('resize', handler)
  return () => window.removeEventListener('resize', handler)
}, [])

• 避免内存泄漏：定时器、WebSocket等资源需要及时清理

4. 网络请求优化

• 请求合并：GraphQL或BFF层合并API请求
• 缓存策略：合理设置Cache-Control头部
• 压缩传输：启用Brotli/Gzip压缩

5. 性能监控

• Lighthouse：定期进行性能审计
• RUM监控：部署真实用户性能监控

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

6. 现代API应用

• Web Worker：将耗时计算移出主线程

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

// compute.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data)
  self.postMessage(result)
}

• IntersectionObserver：实现懒加载

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src
      observer.unobserve(entry.target)
    }
  })
})

最佳实践总结

1. 测量优先：优化前先用DevTools分析瓶颈
2. 渐进增强：优先保证核心功能可用
3. 持续监控：建立性能基线并设置告警
4. 平衡策略：根据业务场景选择合适优化方案