尾递归优化是一场谎言

TLDR

  • 本文是对蹦床函数的应用案例。
  • 蹦床函数跟尾递归优化都是为了解决递归次数过多导致调用栈溢出的问题。
  • 蹦床函数的原理:令原函数返回一个可执行函数,由蹦床函数来控制执行时机,使执行函数与其父函数无执行调用关系。
  • 处理递归栈溢出还有递归转迭代、异步执行等方案,但蹦床函数对代码的改动量很低,也不影响原代码的阅读和执行逻辑。

起因

接到一个需求,需要对 markdown 进行分句。大致如下:

text 复制代码
// 原始 md
aaa。bbb[^1^]。ccc。

// 转换后 md
aaa。x:[bbb[^1^]]。ccc。

即把以[^*^]结尾的句子给包起来。

方案思路比较简单:

  • 写一个函数,入参为起始位置,大概这样:walk(startIndex)
  • 起始位置设为最后一个字符位置,往前找,如果找到[^*^]则往前找句子结束符(如。!?-),找到后就把整句话用x:[]包起来。
  • 继续调用这个函数,入参startIndex为刚刚那个句子的起始位置。
  • 直到入参为0(即找到头了),结束执行。

完美,补充完测试用例,开心光速下班 😃。


命运所有的馈赠早已暗中标好了价格。


报错

一天后:

栈溢出了。

同事的需求需要往这段 markdown 里填充上万字符,我的递归函数爆栈了 🤯🤯🤯。

一时间脑海里立刻出现 3 条解决方案:

  • 问 gpt
  • 问 gpt
  • 问 gpt

得到了6种解决方案:

  1. 尾递归优化(Tail Call Optimization)
  2. 循环替换递归( Loop) 将递归转换为等效的循环
  3. 使用堆栈来管理状态(Manual Stack Management) 手动使用数组作为堆栈来保存需要的状态,模拟递归的过程。
  4. 使用异步递归( Async Recursion) 通过把递归调用放在setTimeout、setImmediate或Promise中来异步执行,可以避免同步递归调用造成的堆栈溢出。
  5. 节流递归(Throttling Recursion) 通过定期将递归调用事件推迟到下一个事件循环迭代中,你可以避免堆栈溢出。
  6. Trampoline 函数(Trampoline Function) Trampoline 是一种编程技巧,允许你改写递归函数,使其成为迭代的,而不需要占用新的调用栈帧。

简单评估下这几个方案:

  • 方案2和3对代码的改动量较大,递归变迭代,实在懒得改也懒得验证,哒咩 ❌
  • 方案4和5把同步逻辑改成了异步,对代码逻辑的侵入性太强,哒咩 ❌
  • 方案1的尾递归优化我现在就在用,无效,哒咩 ❌

方案一让我感觉撞了鬼:为什么我写的尾递归优化没生效?

搜了下才发现尾递归优化可谓名存实亡,主流浏览器全都不支持尾递归优化:

compat-table.github.io/compat-tabl...

详见文章:尾递归的后续探究-腾讯云开发者社区-腾讯云

解决

5/6的方案都被否掉,看来看去只能使用 Trampoline 函数,即蹦床函数。

我们看下 gpt给的示例,以解释蹦床函数做了些什么:

js 复制代码
function trampoline(fn) {
  return function(...args) {
    let result = fn(...args);
    while (typeof result === 'function') {
      result = result();
    }
    return result;
  };
}

function sum(x, y) {
  if (y > 0) {
    return () => sum(x + 1, y - 1);
  } else {
    return x;
  }
}

let safeSum = trampoline(sum);
safeSum(1, 100000);

这里对原函数的修改在第13行,正常的递归会直接执行sum函数,而这段优化里则改成返回了一个函数,我们姑且称之为 handler 函数。

而 trampoline 函数的作用则是执行 sum 函数并判断返回值,如果返回值是函数(即 handler 函数),则继续执行该函数,直到返回值是数字。整个判断&执行过程使用 while循环。

蹦床函数之所以能够摆脱递归调用栈限制,是因为 handler 函数是由蹦床函数执行的,handler 函数执行前,它的父函数 sum 函数已经执行完毕了,handler 的执行跟 sum 的执行没有堆栈关系。


完美,补充完测试用例,开心光速下班 😃。

相关推荐
程序饲养员2 分钟前
使用React Router 7.5进行静态站点生成(SSG)教程
前端·javascript·react.js
前端极客探险家6 分钟前
使用 Vue 3 + Google Maps API 实现定位与路线规划功能
前端·javascript·vue.js
低头专研1 小时前
用 HTML 网页来管理 Markdown 标题序号
前端·html·markdown·markdown标题编号
小妖6661 小时前
html 给文本两端加虚线自适应
前端·javascript·html
阿諪諪1 小时前
Vue Router(1)
前端·javascript·vue.js
键指江湖1 小时前
React 条件渲染
前端·react.js·前端框架
禾小西1 小时前
IDEA的使用
java·前端·intellij-idea
斗锋在干嘛1 小时前
WebView 与 JavaScript 的交互
开发语言·javascript·交互
天天进步20151 小时前
C++使用WebView2控件,通过IPC通信与Javascript交互
javascript·c++·交互
@PHARAOH1 小时前
HOW - 实现 useClickOutside 或者 useClickAway
前端·javascript·react.js