HTML结构冗余不增传输延迟但显著拉长渲染延迟，DOM深度超6层时FCP非线性恶化，depth=9比=5多耗89ms；应删无样式匹配的class、空标签及模板残留，NB-IoT场景须禁用2层以上嵌套并采用字段字典编码。
HTML结构冗余本身不增加网络传输延迟，但它会让100ms的网络延迟变成300ms的渲染延迟——关键卡点不在“传得多”，而在“解析不动”。
DOM深度超6层时，FCP延迟非线性跳变
浏览器解析HTML不是线性扫一遍就完事。每多一层嵌套，解析器就得为每个节点执行一次父引用绑定、闭合校验和栈帧操作。domInteractive时间在低端安卓机上实测：depth=5时为128ms，depth=7升至163ms（+35ms），depth=9直接跳到217ms（+89ms）。这不是累加，是叠加式恶化。
- 用Chrome DevTools → Elements面板右键任意节点 →
Show DOM properties查depth值，这是唯一可靠方式 - 深度≥6的节点，大概率伴随大量空
<div>，它们不贡献语义，却强制触发样式继承计算<li>服务端gzip能压体积，但压不掉解析逻辑——压缩后仍是8层，浏览器仍得逐层挂载</li> <h3>语义化标签不是为了SEO，是删掉解析器必须处理的冗余节点</h3> <p><code><section></section>和<main></main>本身不比<div>多占字节，但现代浏览器对它们有解析捷径：遇到<code><main></main>会跳过部分兜底布局推导；<time datetime="..."></time>可被iOS Safari直接识别并缓存，省掉后续AJAX请求。-
<div class="wrapper"><div class="content"> <p>text</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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></div>比<main><section><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></section></main>多出约42字节（不含空格），20处同类结构就是840字节白送 - 把三层
<div class="container"><div class="row"><div class="col">换成<code><main><section></section></main>，DOM节点数减少30%，FCP提前15–22ms - 表格单元格里嵌套
<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></td>会触发重排，且破坏表格原生布局效率CMS/低代码平台导出的HTML最容易埋雷
这类系统常自动生成
<div data-id="xxx">、<code><div class="cms-placeholder">或模板语法残留（如<code>{{header}}）。它们不报错，但干扰DOM构建顺序，尤其在SSR或静态生成场景下引发隐性阻塞。- 用CSS选择器搜索
div[class]，逐个检查是否有对应样式规则；没有匹配的class，整行标签直接删 - 打开DevTools → Elements面板，右键父级
<div> → <code>Break on subtree modifications，交互触发渲染，看哪些包裹层根本没参与样式或逻辑 - 特别注意
<!-- -->注释块：千行注释≈多花3–8ms解析时间；模板语法残留会拖慢tokenization阶段 - 禁用嵌套超过2层：
<div><div></div></div>可接受，<div><div><div></div></div></div>必须告警 - 禁用
class、id、内联样式；语义靠标签本身：<strong></strong>表数值，<small></small>表单位 - gzip对NB-IoT实际无效——握手+压缩+校验开销反而使总传输时间增加18%；改用预定义字段字典（如0x01→"t"）编码更高效
窄带环境（如NB-IoT）下，冗余结构等于卡死信道
NB-IoT单次窗口仅几十毫秒，最大有效载荷约1 KB。一个
<div><div><div><p>温度:25.3℃</p></div></div></div>光标签嵌套就占87字节，而真实传感器数据{"t":25.3}才13字节。多发3个包，就多触发3次重传机制，延迟从200ms跳到1.2s。真正难处理的不是怎么写新结构，而是怎么识别旧结构里哪些
<div>连class名都没被CSS引用过——它们安静地躺在HTML里，每天多消耗几十毫秒的解析时间，没人报错，也没人注意到。</div> - 用CSS选择器搜索
-
