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

提高前端应用性能的实用方案

代码优化

1. 代码拆分与懒加载

// 动态导入实现懒加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

2. Tree Shaking

• 使用ES6模块语法(import/export)
• 配置Webpack的production模式自动启用
• 避免副作用代码

3. 代码压缩

• Webpack使用TerserPlugin
• 启用gzip/brotli压缩

资源优化

1. 图片优化

• 使用WebP格式
• 响应式图片(srcset)
• 懒加载

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

2. 字体优化

• 使用font-display: swap
• 子集化字体
• 预加载关键字体

<link rel="preload" href="font.woff2" as="font" crossorigin>

3. CDN加速

• 静态资源部署到CDN
• 启用HTTP/2

渲染优化

1. 关键渲染路径优化

• 内联关键CSS
• 异步非关键CSS

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

2. 减少重排重绘

• 使用transform/opacity代替top/left
• 批量DOM操作
• 使用will-change提示浏览器

3. 虚拟列表

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

<List
  height={500}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {Row}
</List>

缓存策略

1. Service Worker

// 注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

2. HTTP缓存

• Cache-Control: max-age=31536000 (静态资源)
• ETag/Last-Modified (动态资源)

3. IndexedDB

• 存储大量结构化数据
• 实现离线功能

性能监控

1. Lighthouse

• 定期跑分测试
• 关注FCP/LCP等核心指标

2. 性能API

// 测量关键时间点
const timing = window.performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;

3. 错误监控

• window.onerror
• try/catch捕获异步错误
• 上报错误日志

最佳实践总结

1. 关键指标

• FCP < 1.8s
• LCP < 2.5s
• TTI < 3.9s
• CLS < 0.1

2. 渐进增强

• 核心功能不依赖JavaScript
• 按需加载非关键资源

3. 持续优化

• 建立性能预算
• 定期性能审计
• A/B测试优化方案

通过以上这些方法的组合应用，可以显著提升前端应用的加载速度和运行性能，提供更好的用户体验。实际项目中应根据具体场景选择最适合的优化手段。