因为浏览器对非法HTML静默修正，querySelectorAll('*')统计的是修正后DOM而非原始结构，如<p><div>内容</div></p>实际解析为并列的<div>、<p>、<div>内容</div>三层，深度失真；真正影响性能的是节点总数与平均路径长度，而非视觉嵌套。
为什么直接用 document.querySelectorAll('*') 算 DOM 深度会失真
浏览器对非法 HTML 有静默修正机制，document.querySelectorAll('*') 返回的是修正后的 DOM 节点集合，不是你写的原始结构。比如写 <div>
<p></p>
<div>内容</div>
</div>，实际解析后变成三个并列节点：<div>、<code><p></p>、<div>内容</div>——所谓“嵌套深度”被拍平了。
真正影响渲染性能和内存占用的是节点总数与平均路径长度（root 到 leaf 的边数均值），不是缩进层数或视觉嵌套感。
- W3C Validator 报的
Element div not allowed as child of element p才是结构性异常的第一信号 - 用
document.body.querySelector('div p div')查不到东西？先确认 Elements 面板里这条路径是否存在，而不是急着改 JS - 节点膨胀 ≠ 标签多，而是非法嵌套触发浏览器反复拆解+重挂载，凭空多出孤立节点
哪些 HTML 结构会意外膨胀 DOM 树
三类典型非法嵌套模式，浏览器处理时会无提示地插入/移动/补全节点，导致 document.querySelectorAll('*').length 比原始 HTML 字符数暗示的多出 15%–40%：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<ul><div></div></ul>：浏览器把<div> 踢到 <code><ul></ul>外，同时补一个空<ul></ul>占位，节点数 +2 -
<p></p> <h2>标题</h2>：<p></p>被强制闭合，<h2></h2>插入为兄弟节点，父子关系断裂，样式继承链中断 -
<table><div></div></table>：漏写<tr><td>，整个 <code><div> 被移到 <code><table> 上方，还可能触发隐式 <code><tbody> 插入 <h3>如何用 AST 思维做 HTML 结构质量评估</h3> <p>HTML 不是纯文本，也不是运行时 DOM；它的“源 AST”应基于规范语义解析，而非浏览器修正结果。工具链需绕过渲染引擎，直接对源码做合规性解析：</p> <ul> <li>用 <code>parse5或htmlparser2解析源 HTML，生成符合 WHATWG 规范的树结构，不走浏览器 DOM API - 提取每个节点的
parent、children、allowedChildren（查 HTML spec 表）做合法性校验 - 计算“结构偏差度”：对比源 AST 与标准允许子元素集的差集大小，归一化为 0–1 分数
- 避免依赖
innerHTML或document.createElement，它们自带隐式修复逻辑
AST 重构对 HTML 可维护性的实际影响
基于 AST 的 HTML 重构不是为了“看起来更整齐”，而是切断非法嵌套引发的连锁副作用：
- 修复
<p></p> <div> 类嵌套后，CSS 选择器 <code>p > div才真正生效，无需加 hack 类名 - 移除隐式
<tbody> 后，JS 操作 <code>table.rows不再因意外插入而索引偏移 - 统一用
section替代无意义div嵌套，能显著降低 Lighthouse 的 “Structural markup” 评分波动 - 重构后 diff 工具显示的变更更聚焦语义层，而非浏览器补丁带来的噪音节点
最常被忽略的一点：HTML AST 重构必须在构建早期介入，一旦进入 SSR 或 hydration 流程，DOM 已被修正，再查“原始结构”就晚了。
