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

如何提高前端应用的性能

1. 代码优化

1.1 减少DOM操作

DOM操作非常消耗性能，应尽量减少：

// 不好的做法
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);

1.2 使用事件委托

减少事件监听器数量：

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

// 好的做法 - 事件委托
document.querySelector('.container').addEventListener('click', (e) => {
  if(e.target.classList.contains('item')) {
    handler(e);
  }
});

1.3 避免强制同步布局

读取样式属性会导致浏览器强制重排：

// 不好的做法
element.style.width = '100px';
const width = element.offsetWidth; // 强制重排
element.style.height = width + 'px';

// 好的做法 - 批量读写
element.style.width = '100px';
element.style.height = '100px';

2. 资源优化

2.1 图片优化

• 使用WebP格式替代JPEG/PNG
• 使用响应式图片(srcset)
• 懒加载非首屏图片

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

2.2 代码分割

使用动态导入实现按需加载：

// 静态导入
import { heavyModule } from './heavyModule';

// 动态导入
button.addEventListener('click', async () => {
  const { heavyModule } = await import('./heavyModule');
  heavyModule.doWork();
});

2.3 缓存策略

设置合理的HTTP缓存头：

Cache-Control: public, max-age=31536000

3. 渲染优化

3.1 使用will-change

提前告知浏览器哪些属性会变化：

.animated-element {
  will-change: transform, opacity;
}

3.2 避免布局抖动

// 不好的做法
function resizeAll() {
  boxes.forEach(box => {
    box.style.width = box.offsetWidth + 10 + 'px';
  });
}

// 好的做法 - 分离读写
function resizeAll() {
  const widths = boxes.map(box => box.offsetWidth);
  boxes.forEach((box, i) => {
    box.style.width = widths[i] + 10 + 'px';
  });
}

3.3 使用虚拟列表

对于长列表渲染：

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

<List
  height={400}
  itemCount={1000}
  itemSize={50}
  width={300}
>
  {Row}
</List>

4. 网络优化

4.1 预加载关键资源

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

4.2 使用HTTP/2

• 多路复用
• 头部压缩
• 服务器推送

4.3 服务端渲染(SSR)

提高首屏加载速度：

// Next.js示例
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

5. 工具与监控

5.1 性能分析工具

• Chrome DevTools Performance面板
• Lighthouse
• WebPageTest

5.2 性能指标监控

// 测量关键性能指标
const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()) {
    console.log(entry.name, entry.startTime);
  }
});
observer.observe({type: 'largest-contentful-paint', buffered: true});

5.3 持续优化

建立性能预算：

// .lighthouserc.json
{
  "ci": {
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "first-contentful-paint": ["error", {"maxNumericValue": 2000}]
      }
    }
  }
}

6. 最佳实践总结

1. 测量优先：先使用工具找出性能瓶颈
2. 渐进增强：确保核心功能在低端设备可用
3. 按需加载：非关键资源延迟加载
4. 缓存策略：合理利用浏览器缓存机制
5. 代码拆分：减少初始包体积
6. 持续监控：建立性能基准并持续跟踪

通过以上方法综合应用，可以显著提升前端应用的性能表现。实际项目中应根据具体场景选择最适合的优化策略。