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

# 前端性能优化实战指南

## 1. 资源加载优化

**图片优化：**
- 使用WebP格式替代JPEG/PNG（节省30-50%体积）
```html
<picture>
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="Fallback">
</picture>

代码拆分：

• 使用动态import实现按需加载

const module = await import('./module.js');

预加载关键资源：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

2. 渲染性能优化

CSS优化策略：

/* 避免昂贵属性 */
.avoid {
  will-change: transform; /* 仅对需要动画的元素使用 */
}

/* 使用contain属性限制重绘范围 */
.widget {
  contain: layout paint;
}

JavaScript执行优化：

// 使用requestAnimationFrame处理动画
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}

// 使用Web Worker处理耗时任务
const worker = new Worker('task.js');

3. 内存管理

事件监听器清理：

// 使用AbortController清理事件
const controller = new AbortController();
element.addEventListener('click', handler, { 
  signal: controller.signal 
});
controller.abort(); // 清理所有关联事件

虚拟列表实现：

// 只渲染可见区域的项目
function renderVisibleItems() {
  const start = Math.floor(scrollTop / itemHeight);
  const end = start + visibleItemCount;
  items.slice(start, end).forEach(renderItem);
}

4. 缓存策略

Service Worker缓存：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

API响应缓存：

const cache = new Map();

async function fetchWithCache(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const data = await fetch(url);
  cache.set(url, data);
  return data;
}

5. 性能监控

关键指标测量：

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

// 使用web-vitals库
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);

持续优化建议：

1. 定期进行Lighthouse审计
2. 建立性能预算（如JS bundle < 200KB）
3. 实施渐进式加载策略
4. 监控生产环境性能指标
5. 优化关键渲染路径（Critical Rendering Path）

6. 现代API应用

使用Intersection Observer：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 延迟加载逻辑
    }
  });
});
observer.observe(document.querySelector('.lazy'));

Web Components优化：

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 轻量级DOM操作
  }
}

通过综合应用这些技术，可将页面加载速度提升40-60%，交互响应时间减少30%以上。建议从Lighthouse评分最低的项开始优化，逐步实施这些策略。