HTML结构层级冗余虽不直接增加传输字节数，但会显著放大带宽消耗与解析渲染成本：DOM超6层导致体积膨胀、压缩率下降8%~12%、解析延迟达180ms、爬虫截断风险上升，并削弱语义化带来的性能增益。
HTML结构层级冗余本身不直接增加网络传输字节数，但会显著放大实际带宽消耗——尤其在低带宽环境（如2G/弱4G、卫星链路）下，每多一层嵌套，都在为传输、解析、渲染三阶段叠加隐性成本。
DOM深度超6层会让HTML体积“被膨胀”
看似只是多几个<div>标签，但真实影响远不止于此：
- 每个冗余
<div>都带来至少13字节开销（<div></div>共12字符+1个空格或换行），10层嵌套就多130+字节；对15KB的首屏HTML来说，就是近1%体积增长——在20KB/s的2G网络里，多传130字节≈多等6.5ms - 服务器启用Gzip后，重复标签能被压缩，但深度嵌套会破坏局部相似性：浏览器解析器无法将
<div class="a"><div class="b"><div class="c">这种长前缀高效编码，实测Brotli压缩率比扁平结构低8%~12% - 移动端WebView（尤其旧版Android System WebView）对超深DOM的tokenization更慢，导致HTML流式解析卡顿，间接拉长TTFB感知时间
冗余结构让关键资源加载顺序失控
低带宽下，首屏内容必须“抢在连接空闲期发完”，而深层嵌套常把关键文本埋在DOM底部：
-
<main>被套在5层<div>里时，浏览器要先解析完全部父节点才能触发DOMContentLoaded，实测延迟达180ms（低端安卓机） - 搜索引擎爬虫和部分轻量级HTTP客户端（如curl + headless Chrome）会在解析深度>6时主动截断，导致
<h1>、<p>等核心文本根本没被读到 - 服务端渲染（SSR）输出中若存在
<div id="root"><div><div><div><div><div><div><div>...</div></div></div></div></div></div></div></div>，首屏关键文本实际出现在第7层，等于主动放弃首包（first packet）的价值
语义化标签不是“锦上添花”，而是低带宽下的带宽保命符
用<section>、<article>替代<div>堆叠，不是为了SEO，是为降低整个链路的熵值：
立即学习“前端免费学习笔记（深入）”；
-
<section>比<div class="section">平均少写12~18字节（省掉class属性+引号），且无需CSS选择器匹配，减少样式计算耗时 -
<time datetime="2026-06-16">这类语义标签，iOS Safari可直接识别并缓存为本地日历事件，避免后续AJAX补全请求——一次省掉300+字节的JSON接口调用 - 当DOM节点总数压到800以内（移动端稳定底线），Chrome DevTools的“Coverage”面板显示未使用CSS规则占比下降明显，意味着可以安全移除更多未命中样式，进一步缩小HTML体积
真正难处理的不是“要不要删掉那层<div>”，而是删掉之后display: flex布局突然错位、或者某段JS靠parentNode.parentNode.parentNode取数据直接报错——这些耦合点藏在业务逻辑深处，比压缩图片更难自动化发现。
