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

# 前端性能优化实战指南

## 1. 资源加载优化

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

1.2 图片优化

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

<img data-src="image.webp" class="lazyload">
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target
        img.src = img.dataset.src
        observer.unobserve(img)
      }
    })
  })
</script>

1.3 CDN加速

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

2. 渲染性能优化

2.1 减少重排重绘

• 使用transform替代top/left动画
• 避免频繁操作DOM

// 不良实践
for(let i = 0; i < 100; i++) {
  element.style.left = i + 'px'
}

// 优化方案
let transformValue = ''
for(let i = 0; i < 100; i++) {
  transformValue += `translateX(${i}px)`
}
element.style.transform = transformValue

2.2 虚拟列表

• 大数据列表使用虚拟滚动

// React示例
import { FixedSizeList } from 'react-window'

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
)

const List = () => (
  <FixedSizeList
    height={500}
    width={300}
    itemSize={50}
    itemCount={1000}
  >
    {Row}
  </FixedSizeList>
)

3. JavaScript优化

3.1 代码拆分

• 按需加载路由组件

// React路由懒加载
const Home = React.lazy(() => import('./Home'))

3.2 Web Worker

• 将耗时任务放入Worker

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

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

4. 缓存策略

4.1 Service Worker

• 实现离线缓存

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/main.css'
      ])
    })
  )
})

4.2 本地存储

• 合理使用localStorage

// 设置缓存
function setCache(key, data, ttl) {
  const item = {
    data: data,
    expiry: Date.now() + ttl
  }
  localStorage.setItem(key, JSON.stringify(item))
}

// 读取缓存
function getCache(key) {
  const itemStr = localStorage.getItem(key)
  if (!itemStr) return null
  
  const item = JSON.parse(itemStr)
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key)
    return null
  }
  return item.data
}

5. 监控与分析

5.1 性能指标

• 关注FCP、LCP等核心指标

// 使用Performance API
const perfEntries = performance.getEntriesByType('paint')
perfEntries.forEach(entry => {
  console.log(`${entry.name}: ${entry.startTime}`)
})

5.2 持续优化

• 定期进行性能审计
• 建立性能基准测试

最佳实践总结

1. 资源层面：压缩、合并、按需加载
2. 渲染层面：减少重排、使用硬件加速
3. JS层面：拆分代码、使用Web Worker
4. 缓存层面：合理利用各种缓存策略
5. 监控层面：建立持续的性能监控机制

通过以上多方面的优化措施，可以显著提升前端应用的性能表现，为用户提供更流畅的体验。