HTML解析器不会栈溢出，因用迭代处理嵌套；JS递归遍历DOM会触发RangeError，需改用迭代、预检深度、解耦事件并防隐式递归。
HTML解析器本身不会栈溢出，但JS递归遍历会
浏览器HTML解析器是C++实现的，用迭代而非递归处理嵌套标签，所以哪怕你写1000层
嵌套，页面也能正常加载——它只是渲染慢、内存高，不会报
RangeError: Maximum call stack size exceeded。真正踩坑的是你在JS里写的递归函数，比如用querySelectorAll('*')后对每个节点做深度遍历，或手动实现DOM树遍历逻辑时没设深度限制。- 常见翻车场景：
function walk(node) { node.childNodes.forEach(child => walk(child)); }——遇到深层嵌套DOM直接爆栈 - 真实限制因浏览器而异：Chrome约12000层调用栈，Firefox略低，Safari更保守；但实际项目中超过200层就该警惕
- 不是所有“嵌套深”都危险：CSS选择器如
div div div div...只影响样式计算，不触发JS调用栈
用迭代替代递归遍历DOM树
把递归改成显式栈，就能完全避开调用栈限制。核心是维护一个待处理节点队列，每次取一个、处理子节点、再推入队列。
- 安全写法示例：
const stack = [root]; while (stack.length) { const node = stack.pop(); /* 处理node */; for (const child of node.childNodes) stack.push(child); } - 注意
childNodes包含文本节点和注释节点，如只需元素节点，改用node.children（只返回Element类型） - 若需保留遍历顺序（如先序），用
unshift代替push，但性能略差；多数场景push/pop足够 - 配合
AbortSignal可中断长任务：if (signal.aborted) break;放在循环开头
避免在事件监听中隐式递归
看似无害的事件绑定可能暗藏递归风险，尤其在动态插入内容并自动绑定时。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 典型陷阱：
el.addEventListener('click', () => { el.innerHTML = '<div onclick="this.click()">x</div>'; });——点击触发重绘，新节点又绑了相同逻辑，形成无限递归 - 更隐蔽的是MutationObserver监听自身触发的DOM变更，比如监听
childList后又在回调里appendChild，没加防抖就会循环触发 - 修复原则：所有动态插入的节点，事件绑定必须解耦；用事件委托（
el.addEventListener('click', handler, true)）比内联onclick可靠 - 检查
event.target是否等于event.currentTarget，避免处理冒泡上来的重复事件
预检DOM嵌套深度并设硬性截断
别等用户上传一个手动生成的500层嵌套HTML才崩溃。上线前加一层轻量预检，既防崩也防恶意输入。
立即学习“前端免费学习笔记（深入）”；
- 简单检测脚本：
function getDepth(node) { let max = 0; const walk = (n, depth) => { if (depth > max) max = depth; for (const c of n.children) walk(c, depth + 1); }; walk(node, 1); return max; }——但这个本身是递归，仅用于开发期探查 - 生产环境用迭代版预检：
let depth = 0; const stack = [{ node: root, level: 1 }]; while (stack.length) { const { node, level } = stack.pop(); if (level > depth) depth = level; if (depth > 100) break; // 硬截断 for (const c of node.children) stack.push({ node: c, level: level + 1 }); } - 检测到超深结构后，可降级为只渲染前N层，或提示“结构过于复杂，已自动简化”，而不是静默失败
- 注意：iframe内部DOM不计入父页深度，但跨域iframe无法探测，需单独处理
真实问题往往不在HTML本身，而在你写的JS如何对待它。栈溢出不是浏览器的锅，是你递归没设防、事件没解耦、预检没落地。最易被忽略的点是：你以为自己在操作DOM，其实是在操作调用栈——而栈的容量，从来不是你代码里那行function walk()能决定的。
