基于抽象语法树重构的HTML代码质量底层度量实践-html教程-PHP中文网

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

因为浏览器对非法html静默修正，queryselectorall('*')统计的是修正后dom而非原始结构，如内容实际解析为并列的、、内容三层，深度失真；真正影响性能的是节点总数与平均路径长度，而非视觉嵌套。

基于抽象语法树重构的html代码质量底层度量实践

为什么直接用 `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%：

<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，它们自带隐式修复逻辑