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

如何提高前端应用的性能

1. 减少HTTP请求

• 合并CSS/JS文件：使用webpack等打包工具将多个文件合并
• 使用CSS Sprites：将小图标合并为一张大图
• 内联关键CSS：首屏关键CSS直接内联在HTML中

// webpack配置示例
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

2. 优化资源加载

• 异步加载非关键资源：使用async/defer加载JS
• 延迟加载图片：IntersectionObserver实现懒加载
• 预加载关键资源：<link rel="preload">

<!-- 预加载示例 -->
<link rel="preload" href="critical.css" as="style">

3. 代码优化

• 代码分割：按需加载路由组件
• Tree Shaking：移除未使用代码
• 避免重绘重排：使用transform替代top/left

// React懒加载示例
const LazyComponent = React.lazy(() => import('./LazyComponent'));

4. 缓存策略

• 配置强缓存：Cache-Control max-age
• 使用Service Worker：实现离线缓存
• 内容哈希命名：实现精确缓存

# Nginx缓存配置
location ~* \.(js|css|png|jpg)$ {
  expires 1y;
  add_header Cache-Control "public";
}

5. 图片优化

• 使用WebP格式：比JPEG小25-35%
• 响应式图片：srcset+sizes属性
• 压缩图片：TinyPNG等工具

<!-- 响应式图片示例 -->
<img srcset="small.jpg 500w, medium.jpg 1000w"
     sizes="(max-width: 600px) 500px, 1000px"
     src="medium.jpg">

6. 性能监控

• 使用Lighthouse进行审计
• 真实用户监控(RUM)：收集FP/FCP等指标
• 错误监控：捕获运行时错误

// 性能指标上报
window.addEventListener('load', () => {
  const timing = performance.timing;
  const loadTime = timing.loadEventEnd - timing.navigationStart;
  // 上报到监控系统
});

7. 服务端优化

• 启用Gzip/Brotli压缩
• HTTP/2多路复用
• 边缘计算(CDN)

8. 框架级优化

• 虚拟列表：大数据量渲染
• 组件级缓存：keep-alive
• 服务端渲染(SSR)

// Vue虚拟列表示例
<virtual-list :size="40" :remain="8" :items="data">
  <template v-slot:default="{ item }">
    <div>{{ item.content }}</div>
  </template>
</virtual-list>

最佳实践总结

1. 测量优先：使用Chrome DevTools分析性能瓶颈
2. 渐进增强：优先保证核心功能可用
3. 持续优化：性能优化是持续过程
4. 平衡考虑：不要过度优化牺牲可维护性