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

提升前端应用性能的实用指南

1. 代码优化

1.1 精简JavaScript代码

// 使用代码分割
import(/* webpackChunkName: "moduleA" */ './moduleA')
  .then(module => {
    // 延迟加载模块
  });

// 使用Tree Shaking (Webpack配置)
optimization: {
  usedExports: true,
}

1.2 优化CSS

/* 避免使用@import，改用link标签 */
/* 使用CSS压缩工具如cssnano */
/* 减少选择器复杂度 */
.container > .item {} /* 差 */
.item {} /* 好 */

1.3 图片优化

• 使用WebP格式替代JPEG/PNG
• 实现懒加载

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

2. 网络请求优化

2.1 减少HTTP请求

• 合并CSS/JS文件
• 使用雪碧图(Sprite)
• 内联关键CSS

2.2 启用缓存

# Nginx配置示例
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
  expires 1y;
  add_header Cache-Control "public";
}

2.3 使用CDN

• 将静态资源部署到CDN
• 考虑使用HTTP/2

3. 渲染优化

3.1 关键渲染路径优化

// 延迟非关键JS
<script defer src="non-critical.js"></script>

3.2 避免强制同步布局

// 差 - 导致强制同步布局
const width = element.offsetWidth;
element.style.width = width + 'px';

// 好 - 使用requestAnimationFrame
requestAnimationFrame(() => {
  const width = element.offsetWidth;
  element.style.width = width + 'px';
});

3.3 使用虚拟列表

// React示例
import { FixedSizeList } from 'react-window';

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

4. 性能监控

4.1 核心Web指标

• LCP (最大内容绘制)
• FID (首次输入延迟)
• CLS (累积布局偏移)

4.2 性能分析工具

• Lighthouse
• WebPageTest
• Chrome DevTools Performance面板

5. 进阶优化技术

5.1 Web Workers

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

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

5.2 Service Worker

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

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

6. 移动端优化

• 减少重绘和回流
• 优化触摸事件处理
• 使用will-change属性提示浏览器

.element {
  will-change: transform;
}

7. 持续优化策略

• 建立性能预算
• 自动化性能测试
• A/B测试关键优化点

通过综合应用以上技术，可以显著提升前端应用的加载速度和运行效率，为用户提供更流畅的体验。