深度优先遍历HTML树触发RangeError的根本原因是主线程调用栈硬性上限（V8约10k–15k层），递归遍历深层DOM会快速填满栈帧；解决方式是用while+数组模拟栈实现迭代DFS，或卸载至Web Worker（需数据序列化且Worker内仍须迭代），同时应从源头优化DOM嵌套层级。
为什么深度优先遍历 HTML 树会触发 RangeError: Maximum call stack size exceeded
因为浏览器主线程的调用栈有硬性上限（V8 引擎约 10k–15k 层），而递归遍历嵌套过深的 DOM 树（比如 <div><div><div>...</div></div></div> 超过 5000 层）会快速填满它。这不是代码写错了，而是系统级限制——哪怕每个递归只做 node.children.forEach，栈帧也照堆不误。
用 while + 数组模拟栈替代递归遍历
这是最直接、兼容性最好、无需改数据结构的解法。核心是把“递归调用”转成“手动压栈/弹栈”，完全避开隐式调用栈。
- 每次只处理一个节点，
push子节点到栈顶，pop后继续，不会累积调用帧 - 可随时加
if (depth > 6) break控制最大渲染深度，防止环形引用或异常数据拖垮页面 - 需为每个节点记录当前层级（如
{ node: el, depth: 2 }），避免靠el.parentElement动态计算——后者在深层 DOM 中性能极差 - 示例片段：
const stack = [{ node: document.body, depth: 0 }];
while (stack.length) {
const { node, depth } = stack.pop();
if (depth > 6) continue;
// 处理 node...
for (let child of node.children) {
stack.push({ node: child, depth: depth + 1 });
}
}
Web Worker 中跑 DFS 是否真能防主线程栈溢出
能，但仅限纯计算场景，且必须满足两个前提：数据可序列化、逻辑不操作 DOM。
- 主线程只负责
postMessage()发送 DOM 结构快照（如node.outerHTML或扁平化后的treeData），不传Node实例（不可序列化） - Worker 内仍要防自身栈溢出：即使有独立调用栈，极端深度（如 >50k 层）也可能触发其内部限制，所以 Worker 里也得用迭代版 DFS
- 别指望
details/summary替代 DFS：它不触发事件、无法异步加载子节点，只适合静态、浅层树（≤3 层）
DOM 深度本身是否值得优化
值得，而且比优化遍历逻辑更治本。很多“深层树”根本不是业务必需，而是误用嵌套造成的。
立即学习“前端免费学习笔记（深入）”；
- 视觉缩进 ≠ DOM 嵌套：用
margin-left或grid-template-columns替代多层<div>包裹 - 服务端返回数据时带上
depth字段，前端按需展开，而非无条件渲染全部嵌套 - 移动端 WebView（尤其低端安卓）对 >10 层嵌套的渲染已有可测延迟，这已是性能瓶颈，不止是栈安全问题
