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

提高前端应用性能的实用技巧

1. 代码优化

1.1 精简JavaScript

// 使用事件委托减少事件监听器数量
document.getElementById('parent').addEventListener('click', function(e) {
  if(e.target.matches('.child')) {
    // 处理子元素点击
  }
});

1.2 避免重绘与回流

// 批量DOM操作
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

1.3 使用Web Workers处理耗时任务

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

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

2. 资源加载优化

2.1 懒加载非关键资源

<img data-src="image.jpg" loading="lazy" alt="示例图片">
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const lazyImages = document.querySelectorAll('img[data-src]');
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  });
</script>

2.2 代码分割与动态导入

// 动态导入模块
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

2.3 使用CDN加速静态资源

<script src="https://cdn.example.com/react@18/react.production.min.js"></script>

3. 缓存策略

3.1 合理配置HTTP缓存头

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

3.2 Service Worker缓存

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js'
      ]);
    })
  );
});

4. 渲染优化

4.1 使用虚拟列表优化长列表

// React示例
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>
);

4.2 使用CSS替代JavaScript动画

.box {
  transition: transform 0.3s ease-out;
}
.box:hover {
  transform: scale(1.1);
}

5. 性能监控与分析

5.1 使用Lighthouse进行性能审计

npm install -g lighthouse
lighthouse https://example.com --view

5.2 使用Web Vitals监控核心指标

import { getCLS, getFID, getLCP } from 'web-vitals';

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

6. 构建优化

6.1 Tree Shaking

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
  }
};

6.2 图片优化

# 使用imagemin优化图片
npm install imagemin imagemin-webp --save-dev

7. 最佳实践总结

1. 减少HTTP请求：合并文件、使用雪碧图
2. 压缩资源：Gzip/Brotli压缩
3. 异步加载非关键资源：使用async/defer
4. 优化关键渲染路径：内联关键CSS
5. 使用现代图像格式：WebP/AVIF
6. 避免布局抖动：批量DOM操作
7. 使用性能优化的框架特性：React.memo、Vue的v-once
8. 定期性能审计：使用DevTools和Lighthouse
9. 服务器端渲染：改善首屏性能
10. 渐进式增强：确保核心功能快速可用

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