html结构嵌套超6层会触发dom截断，导致内容未进dom树；script阻塞解析会使html“半途而废”；语义缺失则直接造成seo不索引、读屏失效，三者共同构成首屏渲染、搜索引擎收录与无障碍访问的核心风险。
HTML文档结构不是“写完就能跑”的静态骨架，而是决定页面能否完整加载、被正确索引、被无障碍设备识别的运行前提。结构出问题，后续所有优化都可能失效。
嵌套超过6层会触发DOM截断
浏览器流式解析HTML时，每层嵌套都要创建节点、计算样式、触发布局检查。移动端或弱网下，一旦嵌套超过6层（比如 <div><div><div><table><tr><td><div></div></td></tr></table></div></div></div>），解析器可能因内存压力或超时提前终止——你写的 <code><footer></footer> 或 <main></main> 根本不会进DOM树，DevTools里都看不到。
- 用Chrome DevTools → Elements面板右键任意节点 →
Show DOM properties查nodeType和嵌套深度 - 避免在
<td> 内继续嵌套多层 <code><div>，<code><td> 本身已带样式重排开销 <li>用语义化标签如 <code><section></section>、<article></article>替代纯<div> 堆叠，不减少行数但能压低实际DOM节点数 <h3>script位置不当会让HTML“半途而废”</h3> <p>没加 <code>defer或async的<script></script>放在或中间，会阻塞HTML解析。浏览器必须下载、执行完脚本后才能继续构建DOM——你写的<main></main>后面的内容可能根本来不及解析，首屏就缺块。- 关键逻辑脚本优先放
底部；非关键脚本统一加defer（保证执行顺序）或async（不保证顺序） - 现代框架（如React/Vue）生成的 hydration 脚本必须等完整DOM就绪，否则
hydrateRoot会失败 - 检查Network面板中HTML响应是否被截断，配合Elements面板确认缺失节点是否真没加载
语义缺失直接导致SEO与读屏失效
搜索引擎和屏幕阅读器不看CSS类名，只解析HTML标签层级和属性。用
<div class="nav"></div>替代<nav></nav>，等于主动屏蔽导航区域；把<h2></h2>强行改成<span class="h2-style"></span>，会让读屏软件跳过标题流。-
<header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer>是不可替代的语义锚点 -
<h1></h1>到<h6></h6>必须保持逻辑层级连续，跳级（如<h2></h2>后直接<h4></h4>）会被辅助技术判定为结构异常 - SEO爬虫依赖
<main></main>定位主体内容，没有它，可能把页脚文字当正文索引
最易被忽略的是：结构决策往往不报错，却在首屏渲染、SEO、无障碍三个维度同时埋雷——比如为复用性把
<header></header>抽成组件后漏掉role="banner"，或允许<table> 里出现 <code><div> 导致语义断裂。这些点不打断JS执行，但会让页面在真实用户场景中“失效”。</div> - 关键逻辑脚本优先放
