嵌套超6层会触发DOM截断，导致后续标签无法进入DOM树；应通过DevTools查depth值并重构，优先用语义化标签替代冗余div，删除生产环境注释与空格，媒体标签需设muted或preload属性。
HTML标签嵌套过深或内容冗余，会直接拖慢解析速度、触发DOM截断、延长首屏时间——这不是“可能影响”，而是Chrome/Firefox在真实弱网设备上已验证的确定性行为。
嵌套层级超过6层时DOM被截断怎么办
浏览器流式解析HTML，每增加一层嵌套就多一次节点创建和样式计算。移动端或内存受限设备上，嵌套深度 > 6 时，后续标签很可能根本进不了DOM树，DevTools里都看不到。
- 用 Chrome DevTools → Elements → 右键任意节点 → “Show DOM properties” 查
nodeType和depth，值 > 6 就得拆 - 特别警惕
<td> 内部再套 <code><div>、<code><table> 套 <code><table> 这类结构，重排开销剧增<li>用 <code><section></section>、<article></article>、<header></header>替代纯<div> 堆叠，语义标签不增加渲染成本，还能缩短CSS选择器长度<h3>注释、空格、空行要不要删</h3> <p>开发阶段留注释和空格利于协作，但上线前必须移除——它们不是“无害”，而是白占字节、延长传输和解析时间。</p> <ul> <li>像 <code><!-- 这是一段用于说明导航栏功能的注释 -->这类注释，在生产环境里就是纯负担 - HTML压缩工具（如 html-minifier-terser、Webpack 的 html-webpack-plugin）默认会删空格/换行/注释，但需确认配置项
removeComments: true、collapseWhitespace: true已启用 - 注意：内联
<script></script>或<style></style>中的注释不能一并删除，否则可能破坏逻辑，应单独处理
video/audio 标签不加 preload 或 muted 就容易白屏
浏览器对媒体资源有严格的加载策略，尤其在移动端。没显式声明行为，就等于把控制权交给不确定的默认逻辑。
立即学习“前端免费学习笔记（深入）”；
-
<video src="bg.mp4" autoplay></video>在 iOS Safari 和大多数安卓浏览器里会被静音拦截，必须加muted才能自动播放 -
preload="metadata"比默认preload="auto"更安全，避免整段视频提前下载阻塞首屏；若只是封面图展示，甚至可设为preload="none" - 不要依赖文件后缀判断编码，
.mp4文件内部可能是不被支持的 MPEG-4 Part 2，务必用ffprobe验证编码为 H.264 + AAC
真正卡住性能的，往往不是某一行代码写错，而是结构层面的隐式代价——比如一个没加 defer 的 <script></script> 放在 里，或者一个嵌套8层的 <div> 被当成布局必需品。这些点在本地开发时几乎不暴露问题，一到真机弱网环境就立刻显现。</div>
