如何提高前端应用的性能？# 如何提高前端应用的性能 ## 1. 代码优化 ### 1.1 减少 JavaScript 体

如何提高前端应用的性能

1. 代码优化

1.1 减少 JavaScript 体积

使用 Tree Shaking 移除未使用的代码
代码分割（Code Splitting）按需加载
使用 Webpack 等工具的压缩功能

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true, // Tree Shaking
    splitChunks: {
      chunks: 'all' // 代码分割
    }
  }
}

1.2 避免重绘和回流

使用 transform 和 opacity 等属性触发 GPU 加速
避免频繁操作 DOM
使用 documentFragment 进行批量 DOM 操作

// 使用 documentFragment 批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

2. 资源优化

2.1 图片优化

使用 WebP 格式替代 JPEG/PNG
实现懒加载（Lazy Loading）
使用响应式图片（srcset）

<img src="placeholder.jpg" 
     data-src="image.webp" 
     class="lazyload"
     srcset="image-320w.webp 320w,
             image-640w.webp 640w"
     sizes="(max-width: 600px) 320px,
            640px">

2.2 字体优化

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

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

3. 网络优化

3.1 启用 HTTP/2

多路复用减少连接数
头部压缩降低开销
服务器推送关键资源

3.2 缓存策略

设置合理的 Cache-Control
使用 Service Worker 实现离线缓存
版本化静态资源文件名

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

4. 渲染优化

4.1 关键渲染路径优化

内联关键 CSS
异步加载非关键 JavaScript
预加载重要资源

<head>
  <style>/* 内联关键CSS */</style>
  <link rel="preload" href="main.js" as="script">
</head>
<body>
  <script src="main.js" defer></script>
</body>

4.2 虚拟列表

仅渲染可视区域内容
适用于长列表场景
减少 DOM 节点数量

// 使用 react-window 实现虚拟列表
import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

5. 监控与持续优化

5.1 性能指标监控

使用 Lighthouse 进行审计
监控 FCP、LCP、CLS 等核心指标
建立性能基准

5.2 真实用户监控（RUM）

使用 Web Vitals API
收集用户设备性能数据
识别性能瓶颈

// 使用 web-vitals 库监控核心指标
import {getCLS, getFID, getLCP} from 'web-vitals';

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

6. 进阶优化技术

6.1 Web Workers

将计算密集型任务移出主线程
保持 UI 响应流畅
适用于数据处理、加密等场景

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
  console.log('Result:', e.data);
};

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

6.2 WASM 加速

使用 Rust/C++ 编写高性能模块
适用于图像处理、物理计算等
显著提升计算性能

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

最佳实践总结

测量优先：使用工具量化性能问题
渐进增强：确保基础功能在低端设备可用
按需加载：只加载当前需要的资源
持续监控：建立性能预算并持续跟踪
团队协作：将性能优化纳入开发流程

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