在前端开发中，性能优化是一个永恒的话题。本文总结了我在实际项目中积累的性能优化经验。

页面加载优化

资源压缩与合并

  • 使用 Webpack 或 Vite 进行代码打包
  • 压缩 JavaScript、CSS 和 HTML
  • 使用 Gzip 或 Brotli 压缩
1
2
3
4
5
6
7
8
// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

图片优化

  • 使用 WebP 格式替代 JPEG/PNG
  • 实现图片懒加载
  • 使用 CDN 加速图片加载
1
<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="描述">

渲染性能优化

减少 DOM 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
// 不好的做法
for (let i = 0; i < 1000; i++) {
  document.body.innerHTML += `<div>${i}</div>`;
}

// 好的做法
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

使用虚拟滚动

对于长列表，使用虚拟滚动只渲染可见区域的元素：

1
2
3
import { VirtualList } from 'vue-virtual-scroll-list';

<VirtualList :size="40" :remain="8" :bench="10" :data-key="'id'" :data-sources="items" />

内存优化

避免内存泄漏

1
2
3
4
5
6
7
8
9
10
11
// 及时清理事件监听
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    document.addEventListener('click', this.handleClick);
  }

  destroy() {
    document.removeEventListener('click', this.handleClick);
  }
}

防抖与节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流
function throttle(fn, delay) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= delay) {
      last = now;
      fn.apply(this, args);
    }
  };
}

网络请求优化

请求合并

使用 GraphQL 或自定义接口合并多个请求

缓存策略

1
2
3
4
5
6
7
8
// Service Worker 缓存
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

监控与分析

使用 Lighthouse 和 Web Vitals 监控性能指标：

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1

总结

性能优化是一个持续的过程，需要根据实际情况选择合适的优化策略。记住：过早优化是万恶之源，先测量，再优化。