dom嵌套过深指连续5层以上无语义容器节点，如等，需通过chrome devtools layers/elements面板、lighthouse审计（>1500节点）及accessibility面板检查landmark失效来判定。
前端渲染混杂的 HTML 代码，本质不是“格式丑”，而是结构失控——DOM 层级过深、语义错位、嵌套无序，直接导致样式难维护、JS 选择器脆弱、可访问性断裂、甚至 SSR/SSG 构建失败。解决它不能靠格式化工具一键了事，得从结构源头干预。
怎么判断 DOM 嵌套是否过深？
别数 <div> 嵌了多少层，看浏览器 DevTools 的「Layers」面板或「Elements」树状视图里，有没有连续 5 层以上纯容器节点（比如 <code><div class="wrapper"><div class="inner"><div class="content"><div class="body"><div>）；更关键的是检查这些节点是否都缺乏语义、没有独立用途、也不参与逻辑控制。
<ul><li>真实问题往往藏在模板引擎输出或 CMS 插件生成的 HTML 中，比如一个文章卡片被套了 <code><section></section> → <div class="card"> → <code><article></article> → <div class="meta"> → <code><time></time>，而 <div class="card"> 和 <code><div class="meta"> 其实完全多余
<li>用 Lighthouse 的「Best Practices」审计项查「Avoid excessive DOM size」，阈值超过 1500 节点就该警惕</li>
<li>注意：CSS Grid/Flex 容器本身不增加语义层级，但若为它们额外包裹一层 <code><div> 就算冗余
<h3>语义标签用错比不用更危险</h3>
<p><code><section></section> 不是 <div> 的高级替代品，它必须有主题且自带标题；<code><main></main> 在整个页面中只能出现一次，且不能被 <article></article> 或 <aside></aside> 包裹；<nav></nav> 里塞搜索框或登录按钮，等于告诉屏幕阅读器“这是导航链接”，实际却触发表单提交——语义和行为彻底割裂。
- 检查每个
<section></section>是否紧跟着<h2></h2>–<h6></h6>，否则换成<div> <li>动态插入内容时，JS 创建的 <code><header></header>必须确保父级不是<footer></footer>或另一个<header></header>，否则结构树会崩溃 - 用 Chrome 的「Accessibility」面板看「Landmark Regions」，如果
<main></main>出现两次或<nav></nav>被标记为「undefined」，说明语义已失效 - 把重复类名的相邻
<div> 合并，例如 <code><div class="row"> <div class="col">A</div> <div class="col">B</div> </div>→<div class="row"> <div class="col">A</div> <div class="col">B</div> </div>（去掉空 wrapper） - 对服务端渲染模板，加构建时校验：用
html-validate配置规则禁止div > div > div连续三层，或强制<section></section>必须含<h2></h2> - 格式化前先运行
prettier --parser html --write只处理空白，别让自动换行掩盖嵌套问题 - 禁用编辑器的「Auto Closing Tag」对语义标签的补全，比如输入
<nav></nav>后自动补很好，但补<nav><ul><li></ul></nav>就可能诱导错误嵌套 - 团队 PR 检查清单里必须包含：「新增的
<section></section>是否有<h2></h2>？」「删除的<div> 是否影响 JS 查询（如 <code>querySelector('.container .item')）？」最常被忽略的点：HTML 结构优化不是一次性任务，而是每次 DOM 操作（尤其是 innerHTML 赋值、template.innerHTML 插入）前都要做的防御性检查——因为混杂从来不是写出来的，是拼出来的。
如何安全地扁平化现有 HTML 结构？
不是把所有 <div> 全删掉，而是用「职责归因法」：每个节点必须回答「它存在的唯一理由是什么？」——是布局需要？语义承载？还是 JS 绑定钩子？三者只占其一，就保留；占两个，就要拆分；三个都占，大概率该重构。
<ul>
<li>先删掉所有仅用于 CSS 布局的中间层，改用 <code>display: contents 让父容器不参与渲染流，或直接用 Grid/Flex 的子项直选（如 .grid > *）
为什么缩进整齐 ≠ 结构清晰？
VS Code 格式化能把 <div><p><span>文本</span></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div> 排成四行缩进，但它依然违反「<p></p> 是块级容器，不应被 <span></span> 包裹」的语义规则。缩进只是视觉糖衣，真正要动刀的是节点关系。
