JavaScript 性能优化实战指南

涵盖代码优化、内存管理、运行时效率提升等核心方向，通过实战代码示例分析常见性能陷阱及优化方案：

---

一、代码执行效率优化

1. 避免全局变量污染

<JAVASCRIPT>

// ❌ 低效：全局查找耗时长
function sum(a, b) {
  return a + b + window.tax; // 从全局作用域查找 tax
}

// ✅ 优化：缓存局部变量
function sumOptimized(a, b) {
  const tax = window.tax; // 缓存到局部作用域
  return a + b + tax;
}

2. 循环优化策略

<JAVASCRIPT>

// ❌ 原生循环性能差
const arr = [1, 2, 3, ...1000];
for (let i = 0; i < arr.length; i++) {
  // 每次读取 arr.length
}

// ✅ 缓存长度或使用高效循环
const len = arr.length; // 缓存长度
for (let i = 0; i < len; i++) {}

// ✅ 使用 forEach 或 for...of（现代引擎优化更好）
arr.forEach(item => process(item));

---

二、内存管理与防泄漏

1. 及时解除引用

<JAVASCRIPT>

// 元素不再使用后设为 null
let heavyData = loadHugeData();
heavyData = null; // 释放内存

2. 避免闭包滥用

<JAVASCRIPT>

// ❌ 闭包可能导致变量长期驻留内存
function createClosure() {
  const bigData = new Array(1e6).fill('X');
  return function() { console.log('Closure'); };
}

// ✅ 无闭包或合理释放
function cleanClosure() {
  const closure = createClosure();
  closure(); // 使用完后解除引用
  closure = null;
}

---

三、DOM 操作最优化

1. 批量化 DOM 修改

<JAVASCRIPT>

// ❌ 多次触发重排
for (let i = 0; i < 100; i++) {
  document.body.appendChild(createElement(i));
}

// ✅ 使用文档片段减少重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  fragment.appendChild(createElement(i));
}
document.body.appendChild(fragment);

2. 事件代理代替重复监听

<JAVASCRIPT>

// ❌ 每个按钮独立监听（内存浪费）
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// ✅ 父级代理监听（事件委托）
document.getElementById('container').addEventListener('click', event => {
  if (event.target.tagName === 'BUTTON') {
    handleClick(event);
  }
});

---

四、异步逻辑性能优化

1. 节流（Throttle）与防抖（Debounce）

<JAVASCRIPT>

// 防抖：等待输入停止后再触发
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// 节流：固定时间只触发一次
function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

2. Web Worker 处理 CPU 密集型任务

<JAVASCRIPT>

// 主线程
const worker = new Worker('task.js');
worker.postMessage({ data: largeArray });
worker.onmessage = e => console.log(e.data);

// task.js （独立线程）
self.onmessage = function(e) {
  const result = heavyCompute(e.data);
  self.postMessage(result);
};

---

五、现代 JavaScript 引擎优化技巧

1. V8 引擎友好编码

<JAVASCRIPT>

// ✅ 使用单态（Monomorphic）类型
function add(a, b) { return a + b; }
add(1, 2);  // 参数类型始终为 Number
add(3, 4);

// ❌ 多态（Polymorphic）降低优化可能性
function sum(a, b) { return a + b; }
sum(1, 2);    // Number
sum('a', 'b');// String，触发去优化（Deoptimize）

2. 避免 delete 操作符

<JAVASCRIPT>

const obj = { x: 1, y: 2 };
obj.x = undefined;  // 保留属性结构（V8 优化更友好）
// delete obj.x;    // 破坏对象结构，影响隐藏类优化

---

六、分析与调试工具

1. Chrome DevTools

• Performance 面板 ：记录运行时性能，定位长任务和卡顿点

  <JAVASCRIPT>

  // 标记代码段用于性能分析
  console.time('bigTask');
  heavyOperation();
  console.timeEnd('bigTask');

• Memory 面板：检测内存泄漏（对比堆快照）

2. Lighthouse 性能评分

<BASH>

lighthouse http://example.com --view --preset=desktop

---

七、构建与打包优化

1. 代码拆分（Code Splitting）

<JAVASCRIPT>

// Webpack 动态导入
const utils = await import('./heavy-module.js');

2. Tree Shaking 消除无效代码

<JAVASCRIPT>

// Rollup/Webpack 自动删除未导出模块
export function used() {}
export function unused() {} // 未被引用时会剔除

---

总结优先级：

1. 减少主线程阻塞（长任务拆分、Web Worker）
2. 优化高频操作（事件节流、DOM 批量更新）
3. 内存及时释放（解除引用、避免全局变量）
4. 利用现代 JS 特性 （箭头函数、requestIdleCallback）

性能黄金法则 ：Profile First！用数据驱动优化，避免过度优化。