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

如何提高前端应用的性能

1. 代码优化

1.1 减少JavaScript体积

// 使用Tree Shaking删除无用代码
import { functionA } from 'module'; // 只导入需要的函数

// 使用代码分割
const module = await import('./module.js'); // 动态导入

1.2 优化CSS

/* 避免使用通配符选择器 */
.box {} /* 好 */
* {} /* 差 */

/* 使用CSS变量减少重复 */
:root {
  --primary-color: #4285f4;
}
.button {
  color: var(--primary-color);
}

1.3 图片优化

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

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

2. 加载优化

2.1 资源预加载

<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://fonts.gstatic.com">

2.2 缓存策略

# 服务器配置示例
location /static/ {
  expires 1y;
  add_header Cache-Control "public";
}

2.3 服务端渲染(SSR)

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

3. 运行时优化

3.1 虚拟列表

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

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

3.2 防抖/节流

// 防抖示例
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}

3.3 Web Workers

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

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

4. 监控与分析

4.1 性能指标

• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• TTI (Time to Interactive)
• CLS (Cumulative Layout Shift)

4.2 性能工具

// 使用Performance API
const perfEntries = performance.getEntriesByType("navigation");
console.log(perfEntries[0].domComplete);

4.3 错误监控

// 全局错误捕获
window.addEventListener('error', (e) => {
  trackError(e);
});

5. 进阶优化

5.1 WASM应用

// 加载WASM模块
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(obj => {
    obj.instance.exports.compute();
  });

5.2 PWA优化

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

5.3 HTTP/2优化

# Nginx配置
listen 443 ssl http2;

最佳实践总结

1. 测量优先：使用Lighthouse等工具先测量性能瓶颈
2. 渐进式加载：优先加载关键资源，延迟加载非关键资源
3. 缓存利用：合理设置缓存策略减少网络请求
4. 代码分割：按需加载代码减少初始包体积
5. 持续监控：建立性能监控体系，及时发现性能问题

通过以上方法组合应用，可以显著提升前端应用的性能表现，提供更好的用户体验。