非法嵌套会触发至少3次子树级dom修改，且多处耦合时重建频率呈指数增长。
非法嵌套会触发多少次 DOM 重建？
不是“一次错误 → 一次重建”，而是每处非法嵌套都可能引发多轮隐式修正：浏览器先拆解、再重组、最后补样式继承链。实际观测中，一个 <p></p>
<div></div>
document.querySelector('p') 返回的节点，其 nextSibling 很可能是一个新插入的空 <p></p>，而非你预期的 <div>。
<ul>
<li>用 <code>PerformanceObserver 监听 "mutation" 类型事件，能捕获每次自动修正产生的 MutationRecord
getEventListeners(document).mutation，确认是否有框架或 polyfill 注册了干扰监听器innerHTML = '...' 赋值时的重建次数 ≠ 初始 HTML 解析时的重建次数——后者更隐蔽、更难拦截哪些非法嵌套组合会让重建频率翻倍？
真正危险的不是单点错误，而是多个非法嵌套相互耦合。比如 <table><div><tr><td></td></tr></div></table> 这种写法，会同时触发表格结构修复 + 块级元素剥离 + 祖先链重算，三者叠加导致重建频率呈指数增长。
-
<ol><p>item</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></ol>：列表被拆成多个孤立<ol></ol>，每个都需重新计算序号，counter-reset失效 -
<form></form> <form>...</form>：内层<form></form>被完全丢弃，但外层表单的elements集合仍尝试遍历已不存在的节点，触发额外异常处理路径 -
<nav><header><section></section></header></nav>：语义层级断裂，屏幕阅读器跳过<section></section>，而 JS 查询document.querySelector('nav > section')返回 null —— 不是因为没匹配到，而是该节点已被移到顶层
怎么测出真实重建压力？
别只看 FPS 或渲染帧，要盯住 Tree Construction 阶段的实际耗时。Chrome 的 Performance 面板里，展开 “Main” 线程，筛选关键词 Parse HTML 和 Recalculate Style，两者之间夹着的 Update Layer Tree 若频繁出现且持续时间 > 2ms，大概率是非法嵌套拖慢了布局上下文推导。
- 用
performance.mark('start-parse');在<script></script>开头打点，performance.mark('end-dom');在DOMContentLoaded回调里打点，再用performance.measure计算差值——这个时间包含重建开销 - 禁用所有 CSS 后重跑测试：若
Parse HTML时间显著下降，说明样式计算被非法嵌套拉长了祖先链 - 对比
document.body.children.length和源码中内标签数，差值 ≥ 2 就意味着至少发生了两次结构性修正
为什么用 W3C 验证器也测不准重建压力？
W3C 验证器只检查语法合规性，不模拟浏览器的容错算法。它会报 <p></p>
<div></div>
<p></p>
<div></div>
<p></p>，更不会反映这个转换过程对 offsetTop 计算造成的链式重排。
- 验证器通过 ≠ 渲染稳定；验证器报错 ≠ 页面必然崩坏——关键看修正后是否破坏了你的 JS 逻辑依赖
- 某些合法嵌套（如
<div><picture><source><img></source></picture></div>）在旧版 Safari 中仍会触发重建，这是解析器差异，非语法问题 - 真正要测的不是“有没有错”，而是“错之后，浏览器花了多少 cycles 把它掰回来”
getBoundingClientRect() 变慢、让 querySelectorAll 匹配变不可靠、让动画帧卡顿。别等用户反馈布局错乱才查，把 document.querySelectorAll('*').length 和 document.querySelectorAll(':scope > *').length 的比值纳入 CI 检查项，比任何人工 review 都早发现问题。
