如何提高前端应用的性能？```markdown # 前端性能优化实战指南 ## 1. 资源加载优化 ### 1.1 代码

# 前端性能优化实战指南

## 1. 资源加载优化

### 1.1 代码拆分与懒加载
```javascript
// 动态导入实现懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

1.2 资源预加载

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

1.3 静态资源优化

使用WebP格式图片
SVG替代部分图标
配置合适的缓存策略

2. 渲染性能优化

2.1 减少重排重绘

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
  fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment);

2.2 使用虚拟列表

// React中使用react-window
import { FixedSizeList as List } from 'react-window';

<List
  height={400}
  width={300}
  itemSize={50}
  itemCount={1000}
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</List>

2.3 优化CSS选择器

/* 避免使用通配符和深层嵌套 */
.list-item { ... }  /* 好 */
ul li a span { ... } /* 差 */

3. JavaScript优化

3.1 防抖与节流

// 节流实现
function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

3.2 Web Worker使用

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);

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

3.3 内存管理

及时清除事件监听
避免内存泄漏
使用WeakMap/WeakSet

4. 网络优化

4.1 服务端渲染(SSR)

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

4.2 HTTP/2与CDN

启用HTTP/2多路复用
合理配置CDN缓存
使用QUIC协议

4.3 数据请求优化

// GraphQL按需查询
query {
  user(id: 1) {
    name
    avatar
  }
}

5. 监控与持续优化

5.1 性能指标监控

使用Lighthouse审计
监控FP/FCP/LCP等核心指标
真实用户监控(RUM)

5.2 A/B测试优化

关键路径优化
渐进式加载策略
按需加载非关键资源

5.3 构建优化

// webpack配置示例
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

最佳实践总结

测量优先：使用Chrome DevTools和Lighthouse识别瓶颈
渐进增强：确保核心功能在低端设备可用
持续监控：建立性能基准并持续跟踪
团队协作：将性能指标纳入CI/CD流程
平衡策略：根据业务需求权衡优化投入

// 性能测量示例
const t0 = performance.now();
// 执行代码
const t1 = performance.now();
console.log(`耗时: ${t1 - t0}ms`);

通过综合应用这些技术，可以显著提升前端应用的加载速度、交互流畅度和整体用户体验。记住性能优化是一个持续的过程，需要定期评估和调整策略。