浏览器html解析是单向流式过程，嵌套超6层会导致标签消失、script阻塞解析、dns-prefetch格式错误失效、内联资源过大拖慢ttfb，结构决策影响首屏、seo与无障碍。
浏览器解析 HTML 是单向流式过程，一旦结构写法触发阻塞或深度失控，首屏内容就可能根本进不了 DOM 树——不是 JS 慢，是 HTML 本身没被完整读完。
嵌套超6层会让部分标签直接消失
Chrome DevTools 的 Elements 面板里找不到你写的 <footer></footer> 或 <aside></aside>？大概率是嵌套太深被截断了。流式解析器在内存压力或超时机制下会主动丢弃后续节点，尤其在低端安卓机或弱网环境下。
- 用右键任意 DOM 节点 → Show DOM properties 查
depth值，超过 6 就得拆 - 别写
<div><div><div><table><tr><td><div></div></td></tr></table></div></div></div>这类结构：<td> 内嵌套会放大样式重排风险 <li>用 <code><section></section>、<article></article>、<main></main>替代纯<div> 堆叠，语义标签不增加解析成本，还能压低实际 DOM 节点数（移动端建议 ≤800） <h3> <code>script放错位置等于让 HTML “半途而废”没加
defer或async的<script></script>放在里，浏览器会立刻停住 HTML 解析，等 JS 下载执行完才继续——此时哪怕 JS 只有 1KB，首屏也白屏。- 非关键脚本（统计、错误监控、第三方 SDK）必须加
defer：保证顺序，又不阻塞解析 - 纯交互逻辑（如按钮绑定）可用
async，但注意它不保序，且可能在DOMContentLoaded前运行；若操作 DOM，大概率报Cannot read property 'addEventListener' of null - 真要操作首屏 DOM 的脚本（比如初始化轮播），放
前；别信“DOMContentLoaded比load快”的模糊说法——实测晚 100ms 加载，LCP 就晚 100ms
dns-prefetch写错格式等于没写<link rel="dns-prefetch">不报错也不警告，写错就静默失效，你刷新十次都看不到 DNS 查询发起。-
href必须只含协议 + 域名：//cdn.example.com✅，//cdn.example.com/js/app.js❌（含路径即忽略） - 必须放在
最前面：<meta charset>→<title></title>→<link rel="dns-prefetch">× N → 首个外部资源 - 只加确定会用的跨域域名；同源、子域不用加——每个查询都占并发上限（通常 6～10 个），无效请求会挤占真实请求调度优先级
内联资源过大拖慢 TTFB 和 DOM 构建起点
把大段 CSS 或 JSON 数据塞进
<style></style>或<script type="application/json"></script>，HTML 文件体积飙到 50KB+，不仅拉高 TTFB，还会让浏览器卡在文本扫描阶段，DOM 构建被迫延后。- 首屏必需 CSS 提取内联，控制在 2–3KB 内；别塞 base64 大图
- 初始化数据尽量走 SSR 直出，而非客户端拼接；避免用
document.write()动态注入 script - 模板引擎边渲染边请求数据，会导致 HTML 输出延迟——服务端能定死的结构，别留给 JS 拼
真正难优化的不是某一行代码，而是结构决策点：要不要为复用性把
<header></header>抽成组件、是否允许<table> 里出现 <code><div>、能不能接受把 <code><h2></h2>改成<h3></h3>来维持层级连续——这些选择不报错，但会在首屏渲染、SEO 索引、无障碍访问三个维度同时埋雷。 - 非关键脚本（统计、错误监控、第三方 SDK）必须加
