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

以下是关于如何提高前端应用性能的专业技术文章（Markdown格式，已过滤标题和问题）：

## 1. 代码优化
- **减少DOM操作**：批量操作DOM（使用documentFragment），避免频繁重排重绘
```javascript
// 使用documentFragment批量插入
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
listElement.appendChild(fragment);

• 事件委托：利用事件冒泡减少事件监听器数量

// 父元素统一处理子元素事件
document.getElementById('list').addEventListener('click', (e) => {
  if(e.target.tagName === 'LI') {
    // 处理逻辑
  }
});

2. 资源优化

• 图片懒加载：使用Intersection Observer API

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => {
  observer.observe(img);
});

• 资源压缩：
  • 使用Webpack的TerserPlugin压缩JS
  • 使用imagemin压缩图片
  • 开启Gzip/Brotli压缩

3. 缓存策略

• Service Worker：实现离线缓存

// 注册Service Worker
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => console.log('SW registered'))
    .catch(err => console.log('Registration failed'));
}

• HTTP缓存头：
  • Cache-Control: max-age=31536000（静态资源）
  • Cache-Control: no-cache（API请求）

4. 性能监控

• Lighthouse：定期进行性能审计
• Web Vitals：监控核心指标

import {getCLS, getFID, getLCP} from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

5. 现代技术方案

• 代码分割：动态加载模块

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

• SSR/SSG：使用Next.js/Nuxt.js提升首屏性能
• Web Workers：将耗时任务移出主线程

6. 关键优化指标

1. 首次内容绘制(FCP)：控制在1.8秒内
2. 最大内容绘制(LCP)：控制在2.5秒内
3. 首次输入延迟(FID)：控制在100毫秒内
4. 累积布局偏移(CLS)：保持在0.1以下

7. 工具推荐

• Webpack Bundle Analyzer：分析打包体积
• Chrome DevTools Performance：分析运行时性能
• WebPageTest：多地点测试

最佳实践总结

1. 遵循PRPL模式（Push, Render, Pre-cache, Lazy-load）
2. 实施渐进式增强策略
3. 定期进行性能回归测试
4. 建立性能预算机制
5. 采用CDN加速静态资源