如何提高前端应用的性能？```markdown # 前端性能优化实战指南 ## 1. 资源加载优化 ### 1.1 代码

# 前端性能优化实战指南

## 1. 资源加载优化

### 1.1 代码压缩与合并
```javascript
// 使用webpack配置示例
module.exports = {
  optimization: {
    minimize: true,  // 开启代码压缩
    splitChunks: {
      chunks: 'all'  // 自动拆分公共代码
    }
  }
}

使用工具如Webpack、Rollup进行代码压缩
合并小型CSS/JS文件减少HTTP请求
关键资源控制在50KB以内

1.2 图片优化策略

<!-- WebP格式优先加载 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

使用WebP等现代图片格式
实现懒加载(Lazy Loading)
响应式图片(srcset)适配不同设备

2. 渲染性能优化

2.1 CSS优化技巧

/* 避免布局抖动 */
.optimized {
  will-change: transform;  /* 提示浏览器提前优化 */
  contain: content;        /* 限制样式影响范围 */
}

减少重排(Reflow)操作
使用transform/opacity触发GPU加速
避免CSS选择器嵌套过深

2.2 JavaScript执行优化

// 使用requestAnimationFrame优化动画
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

长任务拆分为微任务
Web Worker处理CPU密集型任务
防抖/节流控制事件频率

3. 缓存策略

3.1 浏览器缓存配置

# 服务器响应头示例
Cache-Control: public, max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

静态资源设置长期缓存
使用内容哈希实现缓存失效
Service Worker实现离线缓存

3.2 数据缓存方案

// IndexedDB使用示例
const dbPromise = idb.open('app-store', 1, upgradeDB => {
  upgradeDB.createObjectStore('keyval');
});

本地存储敏感数据
内存缓存高频访问数据
合理设置缓存过期策略

4. 网络层优化

4.1 HTTP/2优化

# Nginx配置示例
server {
  listen 443 ssl http2;
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
}

启用HTTP/2多路复用
服务器推送关键资源
减少域名分散(减少DNS查询)

4.2 CDN加速策略

<!-- 第三方资源使用CDN -->
<script src="https://cdn.example.com/react@18.production.min.js"></script>

静态资源部署到CDN
边缘节点就近分发
智能压缩传输内容

5. 监控与持续优化

5.1 性能指标监控

// 使用Performance API
const perfData = window.performance.timing;
const loadTime = perfData.loadEventEnd - perfData.navigationStart;

核心Web指标监控(LCP/FID/CLS)
真实用户监控(RUM)
A/B测试优化方案

5.2 构建时优化

// 动态导入示例
const module = await import('./module.js');

代码分割(Code Splitting)
按需加载非关键资源
Tree Shaking消除死代码

最佳实践总结

关键渲染路径优化：内联关键CSS，异步加载非关键JS
资源优先级管理：使用preload/prefetch指令
渐进式增强：确保基础功能在低端设备可用
持续测量优化：使用Lighthouse定期检测
架构优化：考虑SSR/SSG方案提升首屏速度

通过综合应用这些技术，可以将页面加载时间减少50%以上，交互响应时间控制在100ms内，实现流畅的用户体验。