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

# 前端性能优化实战指南

## 1. 资源加载优化
### 1.1 代码拆分与懒加载
```javascript
// 动态导入实现路由级代码拆分
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')

1.2 资源预加载

<!-- 关键资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

1.3 图片优化策略

• 使用WebP格式替代传统格式
• 实现响应式图片(srcset)
• 懒加载非首屏图片

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

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示例
<List
  height={500}
  itemSize={50}
  itemCount={1000}
>
  {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('task.js')
worker.postMessage(data)
worker.onmessage = e => updateUI(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 合理设置HTTP缓存头

Cache-Control: public, max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

5. 监控与持续优化

5.1 性能指标采集

// 使用Performance API
const { loadEventEnd, navigationStart } = performance.timing
const loadTime = loadEventEnd - navigationStart

// 关键指标监控
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime, entry.duration)
  }
})
observer.observe({entryTypes: ['paint', 'longtask']})

5.2 可视化性能分析

• Chrome DevTools Performance面板
• Lighthouse自动化测试
• WebPageTest多维度测试

6. 现代化构建优化

6.1 Tree Shaking配置

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    minimize: true
  }
}

6.2 持久化缓存

// webpack配置
output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

7. 关键优化指标

1. 首次内容渲染(FCP) < 1.5s
2. 最大内容绘制(LCP) < 2.5s
3. 首次输入延迟(FID) < 100ms
4. 累积布局偏移(CLS) < 0.1
5. 交互准备时间(TTI) < 3.5s

8. 进阶优化手段

8.1 预渲染关键路径

// Next.js示例