JavaScript 性能优化实战研讨

news2025/6/2 21:12:00

核心优化方向

执行效率：减少主线程阻塞
内存管理：避免泄漏和过度消耗
加载性能：加快解析与执行速度
渲染优化：减少布局重排与重绘

🔥 关键优化策略与代码示例

1️⃣ 减少重排(Reflow)与重绘(Repaint)

// 避免逐行修改样式
const el = document.getElementById('box');

// ❌ 错误方式（多次重排）
el.style.width = '100px';
el.style.height = '50px';
el.style.margin = '10px';

// ✅ 正确方式（单次重排）
el.style.cssText = 'width:100px; height:50px; margin:10px;';

// ✅ 使用class切换
el.classList.add('active-style');

2️⃣ 事件委托优化

// ❌ 每个按钮绑定监听器
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// ✅ 事件委托（单个监听器）
document.body.addEventListener('click', e => {
  if (e.target.classList.contains('btn')) {
    handleClick(e);
  }
});

3️⃣ 防抖与节流

// 防抖（最后一次触发后执行）
function debounce(func, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 节流（固定间隔执行）
function throttle(func, limit = 300) {
  let lastRun;
  return (...args) => {
    if (!lastRun) {
      func.apply(this, args);
      lastRun = Date.now();
    } else {
      clearTimeout(timer);
      const timer = setTimeout(() => {
        if (Date.now() - lastRun >= limit) {
          func.apply(this, args);
          lastRun = Date.now();
        }
      }, limit - (Date.now() - lastRun));
    }
  };
}

// 使用示例
window.addEventListener('resize', throttle(calculateLayout, 200));

4️⃣ 异步任务优化

// ✅ 使用 requestAnimationFrame 替代 setTimeout
function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// ✅ Web Workers 处理 CPU 密集型任务
const worker = new Worker('compute.js');
worker.postMessage(data);
worker.onmessage = e => processResult(e.data);

5️⃣ 内存管理技巧

// 及时清除引用
let largeData = getHugeData();

function process() {
  // 使用数据...
}

// 使用后立即释放
process();
largeData = null; // 解除引用

// 避免闭包内存泄漏
function createHeavyClosure() {
  const bigObj = new Array(1000000);

  return () => {
    // ❌ 错误：闭包捕获bigObj
    console.log(bigObj.length); 
    
    // ✅ 解决方案：只保留需要的数据
    const len = bigObj.length;
    return len;
  };
}

6️⃣ 循环优化

// ❌ 低效循环
for (let i = 0; i < arr.length; i++) { ... }

// ✅ 优化方案
// 1. 缓存长度
const len = arr.length;
for (let i = 0; i < len; i++) { ... }

// 2. 倒序循环（减少比较）
for (let i = arr.length; i--; ) { ... }

// 3. 使用 while 循环
let i = arr.length;
while (i--) { ... }

7️⃣ DOM 操作优化

// ❌ 多次操作DOM
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div);
}

// ✅ 使用文档片段（DocumentFragment）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

📊 性能检测工具

Chrome DevTools
- Performance 面板：分析运行时性能
- Memory 面板：检测内存泄漏
- Coverage 面板：查看代码使用率
Lighthouse：自动化性能评分
WebPageTest：多地点性能测试

🚀 高级优化技术

// 1. 使用 IntersectionObserver 实现懒加载
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('img.lazy').forEach(img => {
  observer.observe(img);
});

// 2. 虚拟滚动（Virtual Scrolling）
// 仅渲染可视区域内容，示例使用 react-window 库
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const VirtualList = () => (
  <FixedSizeList
    height={400}
    width={300}
    itemCount={1000}
    itemSize={35}
  >
    {Row}
  </FixedSizeList>
);