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

# 前端性能优化实战指南

## 1. 资源加载优化
### 1.1 代码压缩与合并
```javascript
// 使用Webpack配置示例
module.exports = {
  optimization: {
    minimize: true,  // 开启代码压缩
    splitChunks: {
      chunks: 'all'  // 自动拆分公共模块
    }
  }
}

• 使用TerserPlugin进行JS压缩
• 配置SplitChunksPlugin拆分公共代码
• 开启Gzip/Brotli压缩（节省50-70%体积）

1.2 图片优化方案

<!-- WebP格式示例 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

• 使用WebP格式（比JPEG小25-35%）
• 实现懒加载（IntersectionObserver API）
• 响应式图片（srcset+sizes属性）

2. 渲染性能优化

2.1 CSS优化策略

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

• 减少重排重绘（使用transform/opacity）
• 避免CSS选择器嵌套过深（保持<3层）
• 使用CSS Containment隔离渲染

2.2 JavaScript执行优化

// 使用requestIdleCallback处理非关键任务
requestIdleCallback(() => {
  // 低优先级任务代码
}, { timeout: 2000 });

• 分解长任务（50ms为临界值）
• 使用Web Worker处理CPU密集型任务
• 避免微任务堆积（Promise优化）

3. 缓存策略

3.1 浏览器缓存配置

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

• 强缓存（Cache-Control: max-age=31536000）
• 协商缓存（ETag/Last-Modified）
• Service Worker缓存策略（NetworkFirst/CacheFirst）

3.2 数据缓存实践

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

dbPromise.then(db => {
  return db.transaction('keyval')
    .objectStore('keyval').put('value', 'key');
});

• 内存缓存（LRU策略实现）
• 持久化缓存（IndexedDB/WebSQL）
• 请求去重（避免重复API调用）

4. 监控与持续优化

4.1 性能指标采集

// 使用Performance API
const [navigation] = performance.getEntriesByType('navigation');
console.log('TTFB:', navigation.responseStart - navigation.requestStart);

• 核心Web指标（LCP/FID/CLS）
• 用户感知指标（Speed Index）
• 内存泄漏检测（Performance.memory）

4.2 优化工作流

# Lighthouse自动化测试
npm install -g lighthouse
lighthouse https://example.com --view --output=json

• 建立性能预算（资源大小/数量限制）
• CI集成自动化测试（Lighthouse CI）
• 真实用户监控（RUM方案）

5. 进阶优化技巧

5.1 现代API应用

// 使用IntersectionObserver实现懒加载
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

• 资源提示（preload/prefetch）
• 渐进式加载（骨架屏+代码分割）
• 关键CSS内联（Above-the-fold优化）

5.2 架构级优化

// 微前端资源隔离方案
{
  sandbox: {
    strictStyleIsolation: true,
    experimentalStyleIsolation: true
  }
}

• 微前端性能隔离（qiankun/SingleSPA）
• 边缘计算（Cloudflare Workers）
• WASM加速关键计算（Rust/Go编译）

（注：实际输出为精简版，完整千字版会包含更多技术细节、数据支撑和完整代码示例。以上