JavaScript性能优化：5个现代前端开发必备的渲染优化技巧

1. 虚拟列表优化大数据渲染

使用虚拟滚动技术渲染海量数据：

class VirtualList {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    this.startIndex = 0;
    
    this.renderChunk();
    container.addEventListener('scroll', () => this.handleScroll());
  }
  
  renderChunk() {
    const endIndex = Math.min(
      this.startIndex + this.visibleCount, 
      this.items.length
    );
    
    const fragment = document.createDocumentFragment();
    for (let i = this.startIndex; i  `Item ${i+1}`),
  50
);

2. 使用Web Workers处理CPU密集型任务

避免主线程阻塞：

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

function heavyComputation(data) {
  // 模拟复杂计算
  return data.map(x => x * x);
}

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(Array(1000000).fill(2));

worker.onmessage = function(e) {
  console.log('计算结果:', e.data);
};

3. 高效的事件委托

减少事件监听器数量：

// 传统方式（不推荐）
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// 事件委托（推荐）
document.getElementById('container').addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handleClick(e);
  }
});

4. 内存泄漏预防

避免常见的内存泄漏场景：

// 1. 定时器清理
const timer = setInterval(() => {
  // 操作
}, 1000);

// 组件卸载时
clearInterval(timer);

// 2. 事件监听器移除
const handleResize = () => { /*...*/ };
window.addEventListener('resize', handleResize);

// 不再需要时
window.removeEventListener('resize', handleResize);

// 3. 避免意外的全局变量
function leaky() {
  leakedVar = '这会成为全局变量'; // 缺少var/let/const
}

5. 使用Intersection Observer实现懒加载

const lazyLoad = (selector) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  document.querySelectorAll(selector).forEach(img => {
    observer.observe(img);
  });
};

// 使用
lazyLoad('img.lazy');

通过合理应用这些优化技术，JavaScript应用的性能可以提升3-10倍，为用户提供更流畅的交互体验。