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

如何提高前端应用的性能

1. 代码优化

1.1 减少 JavaScript 体积

// 使用Tree Shaking移除未使用的代码
import { onlyNeededFunction } from 'large-library';

// 代码分割实现按需加载
const LazyComponent = React.lazy(() => import('./LazyComponent'));

1.2 CSS优化技巧

/* 避免使用通配选择器 */
.specific-element {} /* 好 */
* {} /* 差 */

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

2. 资源加载策略

2.1 预加载关键资源

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

2.2 图片优化方案

<!-- 使用现代图片格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例图片">
</picture>

<!-- 懒加载非首屏图片 -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

3. 渲染性能优化

3.1 减少重绘和回流

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
list.appendChild(fragment);

3.2 使用虚拟列表

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

<List
  height={400}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

4. 缓存策略

4.1 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))
  );
});

4.2 HTTP缓存头设置

Cache-Control: public, max-age=31536000
ETag: "123456789"

5. 监控与分析

5.1 性能指标采集

// 使用Web Vitals API
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

5.2 Chrome DevTools使用技巧

1. 使用Performance面板记录运行时性能
2. 通过Coverage标签找出未使用的CSS/JS
3. 使用Lighthouse进行综合评分

6. 进阶优化手段

6.1 WebAssembly应用

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

6.2 服务器端渲染(SSR)

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

function Page({ data }) {
  return <div>{data}</div>;
}

7. 移动端专项优化

1. 减少主线程工作量
2. 优化触摸事件处理
3. 避免300ms点击延迟

<meta name="viewport" content="width=device-width, initial-scale=1">

8. 持续性能维护

1. 建立性能预算(Performance Budget)
2. 集成性能测试到CI/CD流程
3. 定期进行性能审计

关键注意事项

1. 测量优先：优化前先量化当前性能
2. 渐进增强：确保基础功能在低端设备可用
3. 平衡取舍：某些优化可能增加开发复杂度

最佳实践总结

1. 关键渲染路径优化：优先加载首屏所需资源
2. 按需加载：非关键资源延迟加载
3. 缓存利用：最大限度利用各级缓存
4. 持续监控：建立性能基线并持续跟踪
5. 渐进式优化：从高ROI的优化点着手