嵌套过深直接触发DOM截断，平均深度超6层时，低端安卓机或弱网下浏览器因内存压力或超时终止解析，导致后续标签无法进入DOM树；须用DevTools查depth值，超6即重构，优先语义化标签，控制总节点数≤800。
嵌套过深直接触发DOM截断
平均嵌套深度超过6层时，低端安卓机或弱网环境下，浏览器可能因内存压力或解析超时直接终止后续标签处理——你写的<footer></footer>根本不会进DOM树，DevTools里都看不到。这不是“慢”，是结构丢失。
实操建议：
用Chrome DevTools → Elements面板右键任意节点 → Show DOM properties 查 depth 值；
超过6必须拆解，优先用语义化标签（如<section></section>、<main></main>）替代纯<div>堆叠；<br>移动端稳定底线是DOM节点总数≤800，嵌套过深会快速推高该数值。
<h3>
<code>p里塞div不是样式失效，是DOM被重写
浏览器解析到<p></p>
<div>xxx</div>
<div>开始前就强制闭合<code><p></p>，再把<div>移到外面，最后补一个空<code><p></p>。真实DOM变成：<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div>xxx</div>
<p></p>。
后果包括：
• document.querySelector('p > div')永远返回null
• p { padding: 1em }对<div>完全无效<br>• 屏幕阅读器跳过语义上下文，只读“按钮”，不读前面导语<br>• SSR hydration 时客户端与服务端DOM结构不一致，焦点逻辑丢失
<h3>
<code>ul/ol下放div会让列表“变透明”
写成<ul><div class="item">text</div></ul>是非法嵌套。浏览器会把<div>移出<code><ul></ul>，变成兄弟节点，<ul></ul>内部只剩空壳。
典型现象：
• 默认项目符号消失，list-style不生效
• ul li选择器全部失配，被迫改写为ul + div.item（脆弱且语义丢失）
• 屏幕阅读器无法识别这是列表，可访问性降级
• 动态插入时，服务端渲染与客户端JS重建的DOM层级可能错位
验证和防错不能靠肉眼
非法嵌套不报错，但浏览器静默修正DOM，问题往往在上线后才暴露。别等用户反馈，现在就做三件事：
• 在Chrome DevTools Elements面板中右键节点 → Edit as HTML，改完回车，如果结构瞬间跳变，说明原始嵌套不合法
• 运行document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })揪出被“踢出来”的标签
• VS Code装HTMLHint插件，启用attr-validate和doctype-first规则，实时标红
最隐蔽的坑不在手写代码里，而在CMS输出、富文本编辑器生成、甚至AI生成的HTML中——它们看起来“能渲染”，但DOM早已不是你写的那个结构。
