dom嵌套过深不会导致html解析崩溃，但会使javascript递归遍历触发栈溢出；因浏览器html解析器采用c++迭代实现，而js递归函数每层调用消耗调用栈空间，chrome极限约12000层，实际超200层即需警觉。
DOM嵌套过深不会让HTML解析崩溃，但会直接干掉你的JavaScript递归遍历——RangeError: Maximum call stack size exceeded不是警告，是当场熔断。
为什么HTML能加载1000层嵌套，JS却一碰就崩
浏览器HTML解析器用C++写的迭代逻辑，压根不走调用栈；但你写的walk(node)这种递归函数，每层调用都吃栈空间。Chrome实际极限约12000层，但真实项目里超过200层就得警觉——尤其当用户能上传HTML或富文本编辑器生成结构时。
-
querySelectorAll('*')拿到所有节点后直接forEach递归，等于把整棵树塞进调用栈 - CSS选择器如
div div div只影响样式计算，不触发JS栈溢出 - DOM事件监听里隐式递归更危险：比如
MutationObserver监听自身插入的节点，再触发新插入，形成闭环
用迭代代替递归：安全遍历DOM树的写法
显式维护一个栈或队列，彻底绕开调用栈限制。关键点不在“能不能”，而在“节点类型是否干净”。
- 用
node.children代替node.childNodes——后者包含文本、注释节点，容易误处理 - 顺序要求先序遍历？用
stack.unshift(child)，但性能略差；多数场景stack.push(child)+stack.pop()足够 - 加
AbortSignal支持中断：if (signal?.aborted) break;放在循环开头，防长任务卡死
const stack = [root];
while (stack.length) {
const node = stack.pop();
// 处理 node
for (const child of node.children) {
stack.push(child);
}
}
上线前必须做的预检：给DOM深度设硬性截断
别等用户提交一个500层嵌套的Markdown渲染结果才炸。开发期探查可用递归函数，但生产环境必须用迭代实现预检。
- 开发期快速摸底：
getDepth(root)递归函数仅用于本地调试，不可上生产 - 生产环境用迭代版深度检测，配合阈值（比如
maxDepth = 100）直接return false或抛错 - 对富文本输入、模板引擎输出、第三方SDK注入的DOM，统一走预检中间件
事件绑定里的隐式递归陷阱
看似静态的addEventListener，在动态插入+自动绑定场景下极易形成调用链闭环。
- 避免在
MutationObserver回调里直接操作DOM并触发新变更——先disconnect()，处理完再observe() - 用
event.currentTarget而非event.target，防止冒泡上来重复处理同一节点 - 内联
onclick比addEventListener更难追踪调用路径，优先用后者并统一管理监听器生命周期
真正要盯住的不是嵌套层数本身，而是任何可能把深度变成调用栈深度的地方——尤其是你控制不了输入源时，预检和迭代必须成为基础设施，而不是补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
