Web Workers 可避免主线程栈溢出，因其拥有独立调用栈；主线程仅发送参数与接收结果，递归逻辑在 Worker 中执行，需注意数据序列化限制及 Worker 自身栈深优化。
HTML5 中无法在主线程中通过普通递归避免栈溢出，因为 JavaScript 是单线程执行、调用栈深度受限（通常约 10000–20000 层，具体取决于引擎和环境）。所谓“多线程环境下实现递归算法防止主线程栈溢出”，实际是指利用 Web Workers 将递归计算卸载到独立线程，使主线程完全不参与递归调用，从而规避其调用栈限制。
为什么主线程递归容易栈溢出
JavaScript 主线程的函数调用栈是同步、连续压栈的。深度递归（如遍历深层嵌套对象、大数阶乘、未优化的快速排序等）会快速耗尽栈空间，触发 RangeError: Maximum call stack size exceeded。这不是内存不足，而是引擎为防止无限递归设定的安全上限。
用 Web Worker 拆分递归逻辑
Worker 线程拥有独立的 JavaScript 执行上下文和调用栈，与主线程隔离。将递归任务移入 Worker 后，主线程只负责发送初始参数和接收结果，不参与任何递归调用。
- 主线程：创建 Worker，用
postMessage()发送数据，监听message事件获取结果 - Worker 脚本：接收数据后执行完整递归逻辑（例如树遍历、分治计算），完成后用
postMessage()返回结果 - 注意：Worker 中不能访问 DOM、
window或document，所有数据需序列化传输（支持结构化克隆，但不可传函数、undefined、循环引用对象）
示例：Worker 中实现安全的深度递归斐波那契
主线程代码（index.html）：
Worker 脚本（fib-worker.js）：
const { n } = e.data;
// 尾递归优化 + 迭代降级（可选）避免 Worker 自身栈溢出
function fib(n, a = 0n, b = 1n) {
if (n === 0n) return a;
if (n === 1n) return b;
return fib(n - 1n, b, a + b); // BigInt 防止数值溢出
}
const result = fib(BigInt(n));
self.postMessage({ result: result.toString() });
};
进阶建议：控制递归深度与降级策略
即使在 Worker 中，极端深度仍可能触发其自身栈限制（虽比主线程高，但非无限）。推荐组合使用以下方式：
- 尾递归优化（TCO）：确保递归调用是函数最后一步，现代引擎（如 Safari）可能优化为循环
- 手动转为迭代：用栈数组模拟调用栈，彻底消除递归（适合树/图遍历）
-
分片处理（cooperative recursion）：在 Worker 内部用
setTimeout或queueMicrotask分批执行，避免长任务阻塞，也缓解栈压力 - 设置深度阈值：当递归层级超过安全值（如 5000），自动切换为迭代实现
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
