函数性能优化的微观技巧

在JavaScript中，函数是构建复杂应用程序的基础模块，而作用域则决定了变量的可访问性。理解这两者的关系对于性能优化至关重要。

1. 避免不必要的函数创建

每次函数创建都会消耗内存，特别是在循环或高频调用的代码中：

javascript 复制代码

// 不推荐 - 每次循环都创建新函数
for (let i = 0; i < 1000; i++) {
  document.getElementById('btn' + i).addEventListener('click', function() {
    console.log(i);
  });
}

// 推荐 - 使用单一函数
function handleClick(i) {
  return function() {
    console.log(i);
  };
}

for (let i = 0; i < 1000; i++) {
  document.getElementById('btn' + i).addEventListener('click', handleClick(i));
}

2. 合理利用作用域链

JavaScript的作用域链查找会影响性能：

javascript 复制代码

// 不推荐 - 频繁访问全局变量
function calculate() {
  return window.width * window.height * window.depth;
}

// 推荐 - 局部缓存
function calculate() {
  const {width, height, depth} = window;
  return width * height * depth;
}

3. 函数内联优化

对于小型函数，内联可以避免函数调用开销：

javascript 复制代码

// 小型函数适合内联
function add(a, b) {
  return a + b;
}

// 直接使用 a + b 可能更高效

但对于复杂逻辑，保持函数封装更有利于维护和可能的JIT优化。

4. 减少闭包使用

闭包虽然强大，但会带来内存和性能开销：

javascript 复制代码

// 不必要闭包
function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

// 简单场景可用模块模式替代
const counter = (function() {
  let count = 0;
  return {
    increment: function() {
      return ++count;
    }
  };
})();

5. 参数处理优化

函数参数处理也有性能考量：

javascript 复制代码

// 不推荐 - 过多参数
function processData(a, b, c, d, e, f) {
  // ...
}

// 推荐 - 使用对象参数
function processData({a, b, c, d, e, f}) {
  // ...
}

6. 尾调用优化

ES6支持尾调用优化，可减少调用栈：

javascript 复制代码

// 尾递归优化示例
function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, n * acc); // 尾调用
}

7. 函数缓存

对于纯函数，缓存结果可提升性能：

javascript 复制代码

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalculation = memoize(function(x) {
  // 复杂计算
  return x * x;
});

总结

函数性能优化需要平衡代码清晰度和执行效率。微观层面的优化虽然单个效果有限，但在高频调用或性能敏感场景中累积效果显著。记住：先确保代码正确性，再考虑优化；先测量性能瓶颈，再有针对性优化。