Chrome/Safari 中 iframe 嵌套深度 ≥3 时浏览器会主动挂起渲染，导致白屏、CSS/JS 失效、getBoundingClientRect() 返回 0；可通过 DevTools 运行脚本检查深度，修复需结构降级，如改用 、Web Components 或原生 HTML 实现。
iframe 嵌套超过 2 层就会触发 Chrome/Safari 主动挂起渲染，不是卡顿，是浏览器静默冻结——你看到的白屏、CSS 不生效、getBoundingClientRect() 返回 0，基本就是它。
怎么快速确认是不是 iframe 嵌套过深导致挂起
别看 Network 面板（所有请求都显示 200），也别翻 Console（完全无报错）。真正有效的检查方式只有一种：打开 DevTools → Console，粘贴运行这段脚本：
(function checkIframeDepth(node, depth = 0) {
if (node.tagName === 'IFRAME') {
console.log(`深度 ${depth}:`, node.src || '(no src)');
depth++;
}
for (let child of node.children) {
checkIframeDepth(child, depth);
}
})(document.body);
重点关注输出中 深度 ≥ 3 的条目。只要存在，对应 iframe 子树就大概率已被挂起。把它的 src 单独复制到新标签页打开，如果能正常加载，问题就坐实了。
- 这个限制与同源/跨域无关，
about:blank或data:text/html,同样触发 - Firefox 不挂起，但会把
depth ≥ 3的 iframeDOMContentLoaded延迟 300ms+，且不提示 -
depth = 2（即两层嵌套）是安全边界，<iframe><iframe></iframe></iframe>可用；第三层开始失效
为什么 CSS 和 JS 在深层 iframe 里“失效”
不是没执行，是浏览器压根没给它分配渲染上下文。所有依赖 layout/paint/composite 的行为都会静默失败：
立即学习“前端免费学习笔记（深入）”；
-
getBoundingClientRect()、window.getComputedStyle()永远返回默认值（如top: 0、width: 0） - CSS 动画、
IntersectionObserver、ResizeObserver完全不触发 - 子 iframe 内的
script虽然可能执行，但 DOM 渲染管线已停摆，用户看不到任何变化
根本原因在于 Chromium 渲染管线对嵌套深度做了硬性拦截，防止递归式资源耗尽。这不是 bug，是策略性熔断。
唯一有效的修复方式：结构降级，不是优化
别试图压缩 JS、加 loading="lazy" 或预加载——这些对已挂起的 iframe 完全无效。必须从 DOM 结构上砍掉嵌套层级：
- 把第三层及更深的
<iframe></iframe>替换为<object data="..." type="text/html"></object>，它不参与 iframe 嵌套计数，且支持同源通信 - 改用 Web Component（
custom-element）封装子内容，通过属性传参、事件通信，彻底脱离 iframe 沙箱限制 - 如果是菜单、弹窗等 UI 组件，优先用原生 HTML + CSS 实现（flex/grid 布局 +
::after伪元素），避免任何 iframe 嵌套 - 后端 PHP/Node 模板生成时，加守卫：
if ($depth > 2) return '<div class="fallback">[max nesting reached]</div>';
注意：<embed></embed> 和 <iframe sandbox></iframe> 仍计入嵌套深度，不能替代。
容易被忽略的复合陷阱：DOM 深度 + iframe 嵌套叠加
多级菜单本身 DOM 深度超 6 层（比如 nav > ul > li > ul > li > a），再嵌一层 iframe，两个限制会同时触发：Chrome 先因 layout 耗时飙升卡顿，再因 iframe 深度 ≥ 3 挂起子树。这时候仅改 iframe 没用，必须同步压平 DOM 层级——图标缩进用 display: flex 一行解决，折叠箭头用 ::before 生成，禁止用 div 包裹 a 做语义外包装。
