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

如何提高前端应用的性能

1. 代码优化

1.1 JavaScript优化

• 减少DOM操作：批量处理DOM更新，使用文档片段(documentFragment)

// 不好的做法
for(let i=0; i<100; i++) {
  document.body.appendChild(document.createElement('div'));
}

// 好的做法
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
  fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);

• 事件委托：减少事件监听器数量

// 不好的做法
document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', handler);
});

// 好的做法
document.querySelector('ul').addEventListener('click', (e) => {
  if(e.target.tagName === 'LI') {
    handler(e);
  }
});

1.2 CSS优化

• 避免深层嵌套选择器
• 使用transform和opacity实现动画（触发GPU加速）
• 减少重排和重绘

2. 资源优化

2.1 图片优化

• 使用WebP格式（比JPEG小25-35%）
• 实现懒加载

<img data-src="image.jpg" loading="lazy" alt="">

2.2 字体优化

• 使用font-display: swap避免FOIT
• 子集化字体文件

3. 网络优化

3.1 资源加载策略

• 代码分割：按需加载

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

• 预加载关键资源

<link rel="preload" href="critical.css" as="style">

3.2 缓存策略

• 配置恰当的Cache-Control头
• 使用Service Worker实现离线缓存

4. 渲染优化

4.1 关键渲染路径优化

• 内联关键CSS
• 异步加载非关键JS

<script src="non-critical.js" defer></script>

4.2 虚拟列表

对于长列表，只渲染可视区域内容

// 使用react-window等库实现
import { FixedSizeList as List } from 'react-window';

<List height={600} itemSize={50} itemCount={1000}>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

5. 工具与监控

5.1 性能分析工具

• Lighthouse
• WebPageTest
• Chrome DevTools Performance面板

5.2 持续监控

• 使用RUM(Real User Monitoring)工具
• 设置性能预算

6. 进阶优化

6.1 Web Workers

将计算密集型任务移出主线程

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log(e.data);
};

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

6.2 WASM

对性能关键部分使用WebAssembly

7. 移动端特别优化

• 避免300ms点击延迟

<meta name="viewport" content="width=device-width, initial-scale=1">

• 优化触摸事件处理
• 减少内存使用

最佳实践总结

1. 测量优先：先量化性能问题再优化
2. 渐进增强：确保基础功能在低端设备可用
3. 持续优化：性能优化是持续过程
4. 平衡考虑：不要过度优化牺牲可维护性

通过以上系统化的优化策略，可以显著提升前端应用的性能表现，改善用户体验。