30 seconds of code：JavaScript 递归函数的两种性能优化方案（记忆化与迭代）-北京尧图网络

教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读递归代码虽然直观优雅却往往因重复计算和函数调用开销而成为性能瓶颈。本文以计算斐波那契数列第 n 项为贯穿案例系统讲解 30 seconds of code 项目中总结的两大优化技巧——计算结果记忆化Memoization与改用迭代实现并结合仓库源码剖析两者的执行过程、资源开销与适用场景。读完本文你将能对递归函数进行性能分析并针对不同调用模式选择最优优化策略。递归函数问题拆解与重复计算的开销递归是一种编程技术其核心思路是将最终问题分解为同一问题的更小实例逐个求解后再组合出完整答案。最常见的实现方式是一个不断调用自身的函数每次调用都把问题规模缩小一档直到抵达一个解平凡易得或已知的实例即基线条件 base case。在 30 seconds of code 仓库中递归入门文档对基线条件做了清晰界定当函数不再满足递归条件时即命中基线条件并返回结果从而打断递归循环若不存在这样的条件函数将无限自调用最终导致栈溢出stack overflow。计算斐波那契数列第 n 项是递归的经典示例。使用递归在 JavaScript 中实现如下const fibonacciNumber n n 2 ? fibonacciNumber(n - 1) fibonacciNumber(n - 2) : n;这个实现简洁、易读但隐藏着明显的性能问题每个n对应的子问题会被反复计算多次。为了更好地理解执行过程可以在每次return前加入console.log()调用追踪真实的调用与返回顺序const fibonacciNumber n { console.log([CALLED] fibonacciNumber(${n})); const r n 2 ? fibonacciNumber(n - 1) fibonacciNumber(n - 2) : n; console.log([RETURN] ${r} for n${n}); return r; } fibonacciNumber(4); // [CALLED] fibonacciNumber(4) // [CALLED] fibonacciNumber(3) // [CALLED] fibonacciNumber(2) // [CALLED] fibonacciNumber(1) // [RETURN] 1 for n1 // [CALLED] fibonacciNumber(0) // [RETURN] 0 for n0 // [RETURN] 1 for n2 // [CALLED] fibonacciNumber(1) // [RETURN] 1 for n1 // [RETURN] 2 for n3 // [CALLED] fibonacciNumber(2) // [CALLED] fibonacciNumber(1) // [RETURN] 1 for n1 // [CALLED] fibonacciNumber(0) // [RETURN] 0 for n0 // [RETURN] 1 for n2 // [RETURN] 3 for n4从输出可以看到对每一个nfibonacciNumber都会被调用两次一次传入n - 1一次传入n - 2并持续到以1或0为参数调用为止。这种实现虽然容易编写和理解但同一个值会被重复计算效率低下。随着n增大调用次数呈指数级增长性能问题会急剧放大。这一点在仓库的斐波那契文档中也有印证递归方案更优雅简洁但会因函数调用的额外开销而可能更低效。优化技巧一计算结果记忆化Memoization针对重复计算问题第一种优化技巧是记忆化。其思想是把每次计算的结果缓存起来下次遇到相同输入时直接读取缓存而不再重复计算。仓库中的记忆化专题文章对记忆化的定义和适用标准做了系统阐述可总结为记忆化依赖缓存存储已完成工作的结果目的是避免同一份工作被重复执行它适合耗时长、计算代价高的函数它加速的是后续调用因此最适合相同条件下被多次调用的函数结果存储在内存中若同一函数在差异很大的参数下被反复调用缓存命中率低反而不宜使用记忆化。下面是经过记忆化改造的fibonacciNumber函数。缓存使用Map实现——Map以键值对存储数据且记住键的插入顺序非常适合用函数入参做键、计算结果做值const fibonacciCache new Map(); const fibonacciNumber n { console.log([CALL] fibonacciNumber(${n})); const cacheKey ${n}; let r; if(fibonacciCache.has(cacheKey)) { r fibonacciCache.get(cacheKey); console.log([MEMO] Cache hit for ${n}: ${r}); } else { r n 2 ? fibonacciNumber(n - 1) fibonacciNumber(n - 2) : n; fibonacciCache.set(cacheKey, r); console.log([CALC] Computed and stored value for ${n}: ${r}); } return r; } fibonacciNumber(4); // [CALL] fibonacciNumber(4) // [CALL] fibonacciNumber(3) // [CALL] fibonacciNumber(2) // [CALL] fibonacciNumber(1) // [CALC] Computed and stored value for 1: 1 // [CALL] fibonacciNumber(0) // [CALC] Computed and stored value for 0: 0 // [CALC] Computed and stored value for 2: 1 // [CALL] fibonacciNumber(1) // [MEMO] Cache hit for 1: 1 // [CALC] Computed and stored value for 3: 2 // [CALL] fibonacciNumber(2) // [MEMO] Cache hit for 2: 1 // [CALC] Computed and stored value for 4: 3对比追踪输出可以发现每个n的值只被真正计算一次后续同参数的调用全部命中缓存输出中的[MEMO] Cache hit。斐波那契数列本身的单个数值计算并不昂贵但如果换成计算代价更高的问题或把n调大此时需要计算的数值个数显著增加记忆化带来的收益会非常可观。通用化的记忆化实现memoize与 Proxy 方案在实际项目中逐函数手写缓存既繁琐又易错。仓库的记忆化专题文档提供了两种可复用的通用实现。第一种是手写高阶函数memoize用Map缓存每次调用的返回值并支持通过cached.cache访问缓存本身const memoize fn { const cache new Map(); const cached function (val) { return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) cache.get(val); }; cached.cache cache; return cached; }; // 该函数很慢适合做记忆化 const anagrams str { if (str.length 2) return str.length 2 ? [str, str[1] str[0]] : [str]; return str .split() .reduce( (acc, letter, i) acc.concat( anagrams(str.slice(0, i) str.slice(i 1)).map(val letter val) ), [] ); }; const anagramsCached memoize(anagrams); anagramsCached(javascript); // 首次调用耗时很长 anagramsCached(javascript); // 由于已缓存第二次调用几乎瞬间返回第二种是借助 JavaScript 的Proxy 对象通过handler.apply()陷阱拦截函数调用命中缓存则直接返回缓存结果否则调用原函数并缓存结果后再返回const memoize fn new Proxy(fn, { cache: new Map(), apply (target, thisArg, argsList) { let cacheKey argsList.toString(); if(!this.cache.has(cacheKey)) this.cache.set(cacheKey, target.apply(thisArg, argsList)); return this.cache.get(cacheKey); } }); const fibonacci n (n 1 ? 1 : fibonacci(n - 1) fibonacci(n - 2)); const memoizedFibonacci memoize(fibonacci); for (let i 0; i 100; i ) fibonacci(30); // ~5000ms for (let i 0; i 100; i ) memoizedFibonacci(30); // ~50ms两种通用实现都可直接用于替换本文案例中的手写缓存版本从而在保留递归代码可读性的同时获得性能提升。优化技巧二改用迭代实现Iteration第二种优化技巧源于对递归定义本身的反向思考既然我们可以先求解较小规模的问题、再用其结果推导更大规模问题的解那么从小问题向大问题逐步推进同样可行——只不过这次不是递归调用而是迭代。对于fibonacciNumber该思路的实现如下const fibonacciNumber n { let r 0, l 1, s 0; for(let i 0; i n; i) { r l; l s; s r l; console.log([CALC] i ${i}: r ${r}, l ${l}, s ${s}); } return s; } fibonacciNumber(4); // [CALC] i 0: r 1, l 0, s 1 // [CALC] i 1: r 0, l 1, s 1 // [CALC] i 2: r 1, l 1, s 2 // [CALC] i 3: r 1, l 2, s 3迭代版本的执行轨迹与记忆化版本的计算量相同但表现更优原因主要有两点没有缓存占用内存。迭代方案仅用三个局部变量r、l、s滚动推进而记忆化方案需要Map缓存所有中间结果占用更多内存资源没有递归调用与缓存命中检查的开销。迭代省去了每次子问题求解时的函数调用、栈帧分配与cache.has()/cache.get()等检查代码执行所需资源更少。仓库的斐波那契文档还给出了另一种迭代风格——用数组存储序列逐项生成到第 n 项const fibonacci n { let fib []; for (let i 0; i n; i) { if (i 1) fib.push(i); else fib.push(fib[i - 1] fib[i - 2]); } return fib; }; fibonacci(6); // [0, 1, 1, 2, 3, 5]如果需要返回整个序列而非单个第 n 项上述基于数组的迭代实现更贴合需求若只需单个数值滚动变量的版本则最节省空间。如何选择记忆化还是迭代两种优化方案并非孰优孰劣而是取决于递归代码的真实使用场景。优化时必须非常谨慎针对自己已知或预期更常见的调用模式来权衡记忆化更强大的场景递归函数需要以不同参数被多次调用。此时缓存可以在多次调用之间持续保留后续调用直接复用历史结果累计收益远超单次计算。例如上述anagrams示例中同一字符串的变位词只计算一次后续调用近乎瞬时返回迭代更快的场景递归计算使用频率较低。此时缓存无法被复用反而白白占用内存迭代方案以更少的资源开销胜出若同一次计算中参数差异很大、缓存命中率很低则记忆化几乎无收益应优先考虑迭代或调整缓存策略。综合来看本文介绍的两种技巧可以组合运用先通过递归快速验证正确性再按实际调用模式选择记忆化或迭代落地优化。无论选择哪种方案都应像文中示例一样通过日志或基准测试如仓库记忆化文档中100次调用fibonacci(30)对比毫秒级差异的做法验证真实收益避免盲目优化。更多相关实现可继续阅读仓库中的记忆化专题、递归入门与斐波那契序列生成文档。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of codeJavaScript 中 for...in、for...of 与 forEach() 三种迭代方式的完整对比30 seconds of codeJavaScript 中 for...in、for...of 与 forEach 三种迭代方式的完整对比遍历数组、对象、教程文档30 seconds of codeJavaScript 二维数组初始化的四种实用方案30 seconds of codeJavaScript 二维数组初始化的四种实用方案本文围绕 30 seconds of code 仓库中 initial教程文档Video2X 免费 4K 完整指南本地一键视频超分与补帧Video2X 免费 4K 完整指南本地一键视频超分与补帧 Video2X 是一款免费、开源的机器学习视频超分辨率与补帧框架它让 AI 模型在你自己的电脑上教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

30 seconds of code：JavaScript 递归函数的两种性能优化方案（记忆化与迭代）

相关推荐

HarmonyOS 7 QuickDock 闪控窗开发实录 05：floatView × Stage：重复创建、监听冲突与窗口资源治理【鸿蒙心迹】

HarmonyOS 7 QuickDock 闪控窗开发实录 04：Background Tasks Kit × Stage：前后台任务切换与窗口异常恢复【鸿蒙心迹】

Chat SDK斜杠命令与模态框实战：构建支持/command指令与表单验证的交互

更多资讯

Linux进程间通信实战：管道、共享内存与信号量的选型与陷阱

蒙特卡洛与场景削减驱动的虚拟电厂日前随机优化调度

OpenShell 开始菜单替代工具：从安装配置到批量部署的完整实践指南

CCF《入门篇》精读指南：C++中学生信奥零基础入门路线图

DeepSeek-Coder v2.5在ERP二次开发中的本地化代码生成实践

Day7时间记录复盘：拆解三个时间块，让习惯真正落地

今日更新

插件加载失败深度解析：从did not activate到生命周期排查指南

SpringBoot+Vue+MyBatis企业级房屋租赁管理系统源码解析

企业核心数据灾备自动化：用 OpenClaw 备份到本地 + 云端 + 离线存储的 TaoToken 统一通道实践

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？