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

# 前端性能优化实战指南

## 1. 资源加载优化

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

使用工具如Webpack、Rollup进行代码压缩
合并小文件减少HTTP请求
关键资源内联(Critical CSS/JS)

1.2 图片优化方案

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="Fallback">
</picture>

WebP格式替代传统格式
响应式图片(srcset)
懒加载实现

// 原生懒加载
<img loading="lazy" src="image.jpg">

2. 渲染性能优化

2.1 CSS优化策略

/* 避免昂贵的样式计算 */
.expensive {
  will-change: transform;  /* 提示浏览器提前优化 */
  transform: translateZ(0); /* 触发GPU加速 */
}

减少重排重绘
使用CSS Containment
避免@import阻塞

2.2 JavaScript执行优化

// 使用requestIdleCallback处理非关键任务
requestIdleCallback(() => {
  // 低优先级任务
});

// Web Worker示例
const worker = new Worker('task.js');

任务分片(time slicing)
Web Workers处理CPU密集型任务
避免长任务阻塞主线程

3. 缓存策略

3.1 浏览器缓存配置

# 示例HTTP头
Cache-Control: public, max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

强缓存 vs 协商缓存
Service Worker缓存策略

// Service Worker缓存示例
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
  );
});

4. 现代API应用

4.1 性能监测API

// 使用Performance API
const [entry] = performance.getEntriesByName('important-component');
console.log(entry.loadTime);

// 使用Paint Timing API
performance.getEntriesByType('paint').forEach(console.log);

关键指标采集(FP/FCP/LCP)
用户交互延迟监控

4.2 新特性应用

// 使用IntersectionObserver实现懒加载
const observer = new IntersectionObserver(callback, options);
observer.observe(element);

Virtualization长列表优化
WASM性能敏感模块

5. 构建优化

5.1 现代打包策略

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

// Tree shaking配置
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true
  }
}

按需加载(code splitting)
消除死代码(Tree shaking)
持久化缓存配置

6. 网络层优化

6.1 协议优化

# Nginx配置示例
server {
  listen 443 http2;
  gzip on;
  brotli on;
}

HTTP/2多路复用
预加载关键资源

<link rel="preload" href="font.woff2" as="font">

最佳实践总结

测量优先：使用Lighthouse、WebPageTest等工具建立性能基线
渐进优化：从关键渲染路径开始逐步优化
持续监控：建立性能预算并设置自动化警报
平衡策略：根据设备能力差异化优化(如Data Saver API)
架构演进：微前端、边缘计算等新架构方案评估

性能优化是持续过程，需要结合具体业务场景制定策略。建议每季度进行全面的性能审计，并建立可量化的性能指标体系。