HTML结构冗余不增传输延迟，但会显著放大弱网下感知延迟；嵌套超6层触发更多DOM创建、样式计算与重排，使100ms网络延迟变为300ms渲染延迟，实测低端机domInteractive高出180–250ms。
HTML结构层级冗余本身不增加网络传输延迟，但会显著放大带宽受限下的实际感知延迟——根本原因不是“多传了几个字符”，而是它触发了更多 DOM 节点创建、样式计算和布局重排，让浏览器在弱网设备上更难快速完成首屏渲染。
嵌套过深如何把 100ms 网络延迟变成 300ms 渲染延迟
低带宽环境（如 3G 或高丢包 Wi-Fi）下，HTML 文件下载本身可能只慢几十毫秒，但冗余结构会让浏览器“卡”在解析阶段：每多一层 <div>，就多一次节点插入 + 样式匹配 + 布局树更新。实测显示，在低端安卓机上，一个平均深度为 8 层的 DOM 树，即使 HTML 体积仅 12KB，<code>domInteractive 时间也会比深度为 3 层的同功能页面高出 180–250ms。
- 用 Chrome DevTools → Elements 面板右键任意节点 →
Show DOM properties查看depth值，超过 6 就该重构 - 深度 >6 的节点往往伴随大量无 class 的空
<div>，它们不贡献语义，却强制浏览器做样式继承计算 <li>服务端 Gzip 压缩能减小体积，但无法消除冗余嵌套带来的解析开销——压缩后仍是 8 层，浏览器仍得逐层构建</li> <h3>语义化标签不是“锦上添花”，是降低解析成本的硬开关</h3> <p>写 <code><section></section>和写<div class="section"> 对传输体积影响几乎为零，但前者能让浏览器跳过部分样式继承链和选择器匹配步骤。尤其在 SSR 输出的静态 HTML 中，语义标签可减少约 15% 的样式计算耗时。 <ul> <li> <code><header></header>、<nav></nav>、<main></main>这类标签本身不增加 DOM 节点数，但能缩短 CSS 选择器匹配路径（比如main h2比.content-wrapper .inner-container h2快得多） - 表格单元格里嵌套
<div> 是高频雷区：<code><td><div> <p>text</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5806" title="html-deploy">html-deploy</a> <p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div></td>在 flex 容器中极易触发强制同步布局，低端机上单次重排耗时可达 12ms+ - 全页只用一个
<header></header>却塞进 logo+搜索+登录，屏幕阅读器会合并播报，但对渲染没影响；真正拖慢的是它外面那三层<div> 包裹 <h3>移动端首屏卡顿八成跟 <code><div> 嵌套有关，而不是 JS 或图片 <p>很多团队花时间优化图片懒加载或 JS 分包，却忽略一个事实：Lighthouse 报告里 “Eliminate render-blocking resources” 提示，常源于 HTML 结构本身阻塞了解析流——尤其是 <code><script></script>放在深度嵌套容器内部时，浏览器必须等完整 DOM 子树建完才能执行。- 避免在
<div><div><div><script></script></div></div></div> 这种结构里放脚本；真要内联，确保它在浅层节点下（depth ≤3）</li> <li>关键图必须设 <code>fetchpriority="high"
和decoding="async"，否则哪怕 HTML 只有 5KB，这张图也会卡住主线程 80ms+ - DOM 节点总数超过 800，低端安卓 WebView 就开始掉帧；而 5 层嵌套的按钮组件，一个就能贡献 7 个节点
真正容易被忽略的点是：HTML 嵌套深度和网络延迟没有线性关系，但它会把原本可接受的弱网延迟，转化成用户眼中的“页面不动”。别只盯着
Content-Length，先打开 DevTools 看一眼depth值。 - 避免在
