JavaScript记忆函数提升性能技巧

一分耕耘，一分收获！既然都打开这篇《JavaScript记忆函数如何提升性能》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

记忆函数是用空间换时间的优化技术，通过缓存纯函数的输入输出结果避免重复计算；核心是用Map存储序列化参数为键的执行结果，要求函数无副作用且输入可安全序列化。

JavaScript 中的记忆函数（Memoization）是一种优化技术，通过缓存函数的执行结果，避免对相同输入重复计算，从而提升性能。它特别适合纯函数（输入相同、输出确定、无副作用）场景，比如递归计算、复杂数据处理或频繁调用的高开销函数。

记忆函数的核心原理

记忆函数本质是“用空间换时间”：内部维护一个缓存（通常是对象或 Map），每次调用前先查缓存；命中则直接返回结果，未命中则执行原函数、存入缓存后再返回。

关键点：

• 输入必须可安全作为缓存键（推荐用 JSON.stringify 序列化简单参数，但注意函数、undefined、Symbol、循环引用等无法被正确序列化）
• 缓存需支持多参数、不同数据类型（Map 比普通对象更健壮，支持任意键类型）
• 纯函数前提：不能依赖外部变量或修改外部状态，否则缓存结果可能失效

手写一个基础记忆函数

以下是一个兼容多数场景的简易实现（支持多参数，使用 Map 缓存）：

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 fib = memoize((n) => {
  if (n console.log(fib(40)); // 瞬间返回，未 memoize 时会卡顿数秒

实际性能提升在哪

记忆函数不是“万能加速器”，它的收益体现在特定模式中：

• 重复调用相同参数：如 UI 中多次渲染同一配置项、表单校验反复检查相同值
• 高计算成本函数：如深度遍历树结构、正则匹配大量文本、数值积分等
• 递归重叠子问题：斐波那契、爬楼梯、动态规划类问题，时间复杂度可从指数级降到线性级

⚠️ 注意：如果每次调用参数都不同，或函数本身极快（如 a + b），加 memoize 反而因哈希和查表引入额外开销，得不偿失。

进阶建议与注意事项

生产环境可考虑更健壮方案：

• 用 lodash.memoize：支持自定义 resolver、缓存大小限制（LRU）、清除策略
• 对对象/数组参数，用 JSON.stringify 要小心 NaN、undefined、Date、RegExp 等会被忽略或转成 null；必要时用结构化克隆或专用键生成器
• 注意内存泄漏：长期运行的程序需控制缓存生命周期，例如设置最大条目数或过期时间
• React 中类似思想体现为 useMemo 和 useCallback，但它们服务于渲染优化而非函数逻辑缓存

基本上就这些。记忆函数不复杂但容易忽略适用前提——先确认有重复计算，再缓存，效果立竿见影。

终于介绍完啦！小伙伴们，这篇关于《JavaScript记忆函数提升性能技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！