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

# 前端性能优化实战指南

## 1. 资源加载优化

### 1.1 代码压缩与合并
- 使用Webpack等构建工具进行代码压缩
- 合并CSS/JS文件减少HTTP请求
```javascript
// webpack.config.js
module.exports = {
  optimization: {
    minimize: true
  }
}

1.2 图片优化

• 使用WebP格式替代传统格式
• 实现懒加载技术

<img loading="lazy" src="image.webp" alt="优化图片">

1.3 CDN加速

• 静态资源使用CDN分发
• 配置合理的缓存策略

2. 渲染性能优化

2.1 减少重排重绘

• 使用transform替代top/left动画
• 批量DOM操作

// 不好的做法
elements.forEach(el => {
  el.style.width = '100px'
})

// 优化做法
const fragment = document.createDocumentFragment()
elements.forEach(el => {
  el.style.width = '100px'
  fragment.appendChild(el)
})
document.body.appendChild(fragment)

2.2 虚拟列表

• 大数据列表使用虚拟滚动
• 只渲染可视区域内容

3. JavaScript优化

3.1 防抖节流

• 高频事件使用防抖节流

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, arguments), delay)
  }
}

3.2 Web Worker

• 复杂计算放入Web Worker

// main.js
const worker = new Worker('worker.js')
worker.postMessage(data)

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

4. 缓存策略

4.1 Service Worker

• 实现离线缓存
• 资源预加载

4.2 本地存储

• 合理使用localStorage
• 数据过期策略

5. 监控与持续优化

5.1 性能监控

• 使用Lighthouse评分
• 真实用户监控(RUM)

5.2 A/B测试

• 持续优化关键路径
• 数据驱动决策

最佳实践总结

1. 首屏加载控制在3秒内
2. 关键资源预加载
3. 保持主线程空闲时间>50%
4. 持续监控性能指标
5. 渐进式优化策略

（注：实际内容约980字，完整千字版本可扩展具体案例和更详细的技术实现）