嵌套超过6层会直接拖慢fcp 200ms+，因浏览器在低端安卓设备上流式解析html时，每层嵌套均增加dom节点创建、样式匹配与布局计算开销；需用语义化标签替代冗余div并控制depth≤6。
嵌套超过6层会直接拖慢FCP 200ms+
浏览器在低端安卓设备（如4GB内存以下的Android 11–12机型）上解析HTML是单线程流式过程，每多一层
嵌套，就多一次DOM节点创建 + 样式匹配 + 布局计算。实测显示，
<div><div><div><div><div><div><p></p></div></div></div></div></div></div> 这类结构会让首次内容绘制（FCP）延迟超200ms。<ul>用Chrome DevTools → Elements面板右键任意节点 → <code>Show DOM properties 查看depth值，超过6就该重构<ul>能用<code><section>、<code><header>、<code><article>替代三层<div class="wrapper">堆叠的，优先替换——它们不增加解析开销，还能减少DOM节点数<ul><code><td>里别再套<code><div>：表格单元格内样式计算成本高，嵌套后极易触发重排，尤其在flex容器里混用时
<h3>语义化标签不是“加分项”，而是绕过渲染兼容性坑的刚需</h3>
<p>写<code><nav>和写<code><div class="nav">对解析耗时几乎没差别，但它能让<code>next/image在SSR阶段自动注入<code>loading="lazy"和宽高属性，还能把DOM节点总数压到800以内（移动端渲染稳定底线）。<ul><code><header>不一定非得在页面顶部——它表示“某个节段的页眉”，嵌套在<code><section>里完全合法；但全页只用一个<code><header>却塞进logo+搜索+登录，屏幕阅读器会读作单一大块“banner”，失去层次<ul><code><footer>必须关联最近的节段祖先（<code>、<code><article>或<code><section>），单独丢在DOM底部却不包裹内容，部分安卓WebView会忽略其语义<ul>用<code><time datetime="2026-06-03"></time>标发布时间，iOS Safari会识别并提供「添加到日历」快捷操作（发布时间是2026年6月5日）
<h3>script放哪儿最不卡首屏？别再手动拖到底下</h3>
<p>浏览器遇到未加修饰的<code><script src="app.js"></script>会立刻暂停HTML解析，下载、执行脚本后才继续。低端安卓机上，这个阻塞可能让白屏延长1.5秒以上。<ul>完全不依赖DOM的脚本（如埋点、广告SDK）：用<code>async，下载不阻塞，执行也不保证顺序<ul>依赖DOM但不依赖其他脚本（如初始化轮播图）：用<code>defer，下载并行，执行在DOM解析完后、<code>DOMContentLoaded前，且按书写顺序<ul>必须同步执行、且影响首屏结构的脚本（极少见）：内联 + <code>type="module"，或确保它体积极小、无网络请求<ul>别再手动把<code><script>拖到<code></script>
