函数缓存通过存储已计算结果避免重复运算，提升性能。使用闭包与Map缓存参数及结果，如memoize函数对expensiveCalc实现记忆化，减少递归或密集计算开销。
在JavaScript中，函数缓存（也称为记忆化，Memoization）是一种优化技术，通过缓存函数的执行结果，避免重复计算相同输入带来的性能开销。尤其适用于递归函数或计算密集型操作。下面介绍如何定义函数缓存以及常见的性能优化方法。
什么是函数缓存
函数缓存的核心思想是：当函数被调用时，先检查之前是否已经用相同的参数执行过。如果有，直接返回缓存的结果；如果没有，执行函数并将结果保存下来供后续使用。
这种机制特别适合纯函数——即相同输入始终返回相同输出、没有副作用的函数。
手动实现简单的缓存函数
可以通过闭包和Map或Object来存储缓存数据：
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 expensiveCalc = (n) => {let sum = 0;
for (let i = 0; i sum += i;
}
return sum;
};
const cachedCalc = memoize(expensiveCalc);
console.log(cachedCalc(10)); // 第一次执行，耗时
console.log(cachedCalc(10)); // 直接从缓存读取
缓存键的处理注意事项
缓存的有效性依赖于参数的“唯一标识”。常见问题包括：
- 参数顺序和类型必须一致：[1] 和 ['1'] 应视为不同键
- 对象和数组作为参数时需序列化：JSON.stringify 可能忽略 undefined、函数或循环引用
- 函数上下文（this）影响结果时应纳入缓存键
进阶做法可以使用更健壮的键生成策略，例如自定义哈希函数或使用专门库如 fast-stable-stringify。
性能优化建议
虽然缓存能提升性能，但不当使用反而造成内存泄漏或性能下降：
- 限制缓存大小：使用 LRU（最近最少使用）缓存结构，如 lru-cache 库，防止无限增长
- 选择合适的数据结构：频繁读写场景下，Map 比 Object 更高效
- 避免缓存异步函数的Promise外壳：应缓存 resolved 后的结果，而非 Promise 对象本身
- 慎用于高频小计算函数：缓存查找开销可能超过原函数执行时间
使用第三方库简化实现
实际项目中可使用成熟库减少出错：
- lodash.memoize：提供基础缓存功能，支持自定义resolver
- memoizerific：支持LRU限制
- fast-memoize.js：高性能缓存方案
示例：
import memoize from 'lodash.memoize';const memoizedFn = memoize((a, b) => a + b, (...args) => JSON.stringify(args));
基本上就这些。合理使用函数缓存能显著提升应用响应速度，关键是根据函数特性设计合适的缓存策略，平衡内存与性能。不复杂但容易忽略细节。
