JavaScript性能优化实战指南（详尽分解版）

news2025/6/5 5:45:56

JavaScript性能优化实战指南

一、加载优化

减少HTTP请求

// 合并CSS/JS文件
// 使用雪碧图CSS Sprites
.icon {
  background-image: url(sprites.png);
  background-position: -20px 0;
}

代码分割与懒加载

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

// React懒加载
const LazyComponent = React.lazy(() => import('./Component'));

二、执行效率优化

避免长任务阻塞

// 分解任务
function processChunk(start) {
  for(let i = start; i < Math.min(start + 100, data.length); i++) {
    // 处理数据
  }
  if(start < data.length) {
    requestIdleCallback(() => processChunk(start + 100));
  }
}

// Web Workers示例
const worker = new Worker('worker.js');
worker.postMessage(largeData);

事件处理优化

// 事件委托
document.getElementById('list').addEventListener('click', (e) => {
  if(e.target.tagName === 'LI') {
    handleItemClick(e.target);
  }
});

// 滚动优化
let ticking = false;
window.addEventListener('scroll', () => {
  if(!ticking) {
    requestAnimationFrame(() => {
      updatePosition();
      ticking = false;
    });
    ticking = true;
  }
});

三、内存管理

避免内存泄漏

// 清除定时器
const timer = setInterval(() => {...}, 1000);
componentWillUnmount() {
  clearInterval(timer);
}

// 解除DOM引用
let elements = document.getElementsByClassName('item');
elements = null;

// 使用WeakMap
const weakCache = new WeakMap();
function cacheData(obj, data) {
  weakCache.set(obj, data);
}

对象池技术

class ObjectPool {
  constructor(createFn) {
    this.pool = [];
    this.createFn = createFn;
  }
  
  get() {
    return this.pool.pop() || this.createFn();
  }

  release(obj) {
    this.pool.push(obj);
  }
}

// 使用示例
const particlePool = new ObjectPool(() => new Particle());
const p = particlePool.get();
// 使用后回收
particlePool.release(p);

四、渲染优化

减少重排重绘

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

// GPU加速动画
.element {
  transform: translateZ(0);
  will-change: transform;
}

虚拟滚动实现

class VirtualScroll {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    this.startIndex = 0;
    
    container.addEventListener('scroll', this.handleScroll.bind(this));
    this.render();
  }

  handleScroll() {
    const newStart = Math.floor(this.container.scrollTop / this.itemHeight);
    if(newStart !== this.startIndex) {
      this.startIndex = newStart;
      this.render();
    }
  }

  render() {
    const endIndex = this.startIndex + this.visibleCount;
    const visibleItems = this.items.slice(this.startIndex, endIndex);
    
    // 更新DOM逻辑
    // 复用现有DOM节点
  }
}

五、网络请求优化

资源压缩与缓存

# .htaccess配置示例
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

数据缓存策略

const cache = new Map();

async function fetchData(url) {
  if(cache.has(url)) {
    return cache.get(url);
  }
  
  const data = await fetch(url).then(res => res.json());
  cache.set(url, data);
  
  // 本地持久化存储
  try {
    localStorage.setItem(url, JSON.stringify(data));
  } catch(e) {}
  
  return data;
}

六、性能分析工具

Chrome DevTools使用技巧
- Performance面板录制分析
- Memory面板堆快照分析
- Coverage面板检测未使用代码
Lighthouse优化建议

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

七、高级优化技巧

WebAssembly应用

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

算法复杂度优化

// O(n)替代O(n^2)
// 未优化
function findPair(arr, target) {
  for(let i=0; i<arr.length; i++) {
    for(let j=i+1; j<arr.length; j++) {
      if(arr[i] + arr[j] === target) return true;
    }
  }
  return false;
}

// 优化后
function findPairOptimized(arr, target) {
  const seen = new Set();
  for(const num of arr) {
    const complement = target - num;
    if(seen.has(complement)) return true;
    seen.add(num);
  }
  return false;
}