JavaScript性能优化代码示例

JavaScript性能优化实战大纲

性能优化的核心目标

减少加载时间、提升渲染效率、降低内存占用、优化交互响应

代码层面的优化实践

避免全局变量污染，使用局部变量和模块化开发
减少DOM操作频率，批量处理DOM更新
使用事件委托替代大量事件监听器
优化循环结构，减少不必要的计算
使用Web Workers处理密集型计算任务

内存管理策略

及时清除不再使用的对象引用
避免内存泄漏，注意闭包使用场景
使用弱引用（WeakMap/WeakSet）管理临时数据
监控内存使用情况，利用DevTools分析内存快照

网络请求优化

压缩JavaScript文件（UglifyJS/Terser）
采用代码分割和动态导入（Dynamic Import）
合理设置缓存策略（ETag/Cache-Control）
减少第三方库依赖，按需加载polyfill

渲染性能提升

使用requestAnimationFrame替代setTimeout动画
优化CSS选择器减少重绘回流
利用硬件加速（transform/opacity）
虚拟列表技术优化长列表渲染

现代API应用

使用Intersection Observer实现懒加载
Performance API进行精确性能测量
WebAssembly处理高性能计算场景
Service Worker实现离线缓存

工具链配置

Webpack优化配置（Tree Shaking/Scope Hoisting）
Babel精准配置目标浏览器
ESLint性能相关规则检查
持续集成中的性能基准测试

监控与分析

建立性能指标收集系统（FP/FCP/LCP）
真实用户监控（RUM）数据采集
火焰图分析JavaScript执行瓶颈
A/B测试验证优化效果

常见反模式

过早优化导致的代码可维护性下降
过度依赖微优化而忽视架构缺陷
忽视浏览器差异的性能假设
缺乏度量标准的盲目优化

JavaScript性能优化代码示例

以下是几种常见的JavaScript性能优化技巧及对应的代码实现：

节流（Throttle）函数 防止高频触发事件导致性能问题

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
window.addEventListener('resize', throttle(function() {
  console.log('窗口大小改变了');
}, 300));

防抖（Debounce）函数 确保在事件停止触发后才执行函数

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 使用示例
const input = document.getElementById('search');
input.addEventListener('keyup', debounce(function() {
  console.log('搜索:', input.value);
}, 500));

虚拟滚动（Virtual Scrolling） 优化长列表渲染性能

class VirtualScroll {
  constructor(container, items, itemHeight, renderItem) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.renderItem = renderItem;
    
    this.container.style.height = `${items.length * itemHeight}px`;
    this.container.style.position = 'relative';
    this.container.style.overflow = 'auto';
    
    this.renderWindow();
    container.addEventListener('scroll', () => this.renderWindow());
  }
  
  renderWindow() {
    const scrollTop = this.container.scrollTop;
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.min(
      startIndex + Math.ceil(this.container.clientHeight / this.itemHeight),
      this.items.length - 1
    );
    
    const visibleItems = this.items.slice(startIndex, endIndex + 1);
    
    this.container.innerHTML = '';
    visibleItems.forEach((item, index) => {
      const itemElement = this.renderItem(item);
      itemElement.style.position = 'absolute';
      itemElement.style.top = `${(startIndex + index) * this.itemHeight}px`;
      this.container.appendChild(itemElement);
    });
  }
}

// 使用示例
const container = document.getElementById('list-container');
const items = Array.from({length: 10000}, (_, i) => `Item ${i + 1}`);
new VirtualScroll(
  container,
  items,
  50,
  item => {
    const div = document.createElement('div');
    div.textContent = item;
    div.style.height = '50px';
    return div;
  }
);

Web Worker使用 将计算密集型任务转移到后台线程

// main.js
const worker = new Worker('worker.js');
worker.postMessage({data: largeArray});

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

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

function heavyComputation(item) {
  // 复杂的计算逻辑
  return item * 2;
}

内存优化 避免内存泄漏

// 清除事件监听器
const element = document.getElementById('myElement');
const handler = () => console.log('点击事件');
element.addEventListener('click', handler);

// 在不需要时移除
element.removeEventListener('click', handler);

// 清除定时器
const timer = setInterval(() => {
  console.log('定时器运行');
}, 1000);

// 在不需要时清除
clearInterval(timer);

这些代码示例涵盖了JavaScript性能优化的几个关键方面：事件处理优化、列表渲染优化、多线程处理和内存管理。