深层嵌套 div 会直接拖慢 FCP，实测延迟 200ms+；6 层以上 DOM depth 导致解析、样式继承开销非线性增长；table-layout: auto、script 未 defer/async、innerHTML 拼接等均显著拖慢首屏渲染。
深层嵌套 div 会直接拖慢 FCP，不是“可能”，是实测延迟 200ms+
在低端 Android 设备或 iOS 14 旧款机型上，
<div><div><div><div><div><p>文本</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）"><img
src="https://img.php.cn/upload/skill/000/000/081/179196125775037.jpg" alt="page-agent 浏览器控制（CDP）" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）">page-agent 浏览器控制（CDP）</a>
<p>使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。</p>
</div>
<a href="/xiazai/skill8291" title="page-agent 浏览器控制（CDP）" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></div></div></div></div></div> 这种结构会让首次内容绘制（FCP）稳定延迟 200ms 以上。原因不是“浏览器太老”，而是流式解析时每层都要创建 DOM 节点、匹配结束标签、计算样式继承链——6 层之后，这些开销开始非线性增长。</p>
<ul>
<li>用 Chrome DevTools → Elements 面板右键任意节点 → <code>Show DOM properties 查看 depth 值，超过 6 就该重构
<section></section>、<main></main>、<article></article> 这类语义标签不增加解析成本，还能缩短 CSS 选择器匹配路径<div data-reactroot> 和 <code><div id="__next">，这两层要计入总 depth，别忽略
<h3>table-layout: auto 是表格性能杀手，尤其含长文本时</h3>
<p>默认的 <code>table-layout: auto 会让浏览器扫描所有 <td> 内容才能确定列宽。50 行 × 10 列带中文的表格，光这一项就能卡住主线程 100ms+。这不是渲染慢，是布局计算被堵死。
<ul><li>强制设 <code>table-layout: fixed，再用 <col width="120"> 或第一行 <th style="width: 120px"> 显式定义列宽
<li>避免在 <code><td> 里嵌套 <code><div>，尤其含 <code>display: flex 或 position: relative ——这会让整行重排变成同步阻塞操作
innerHTML 批量写入 <tbody>，比循环 <code>appendChild 快 5–10 倍
script 放错位置，首屏白屏就注定
浏览器遇到未加 defer 或 async 的 <script></script>，立刻暂停 HTML 解析器，把控制权交给 JS 引擎。哪怕脚本只有一行 console.log(1)，DOM 树也建不完。
- 纯埋点、广告 SDK：用
async，下载不阻塞，执行也不保证顺序 - 依赖 DOM 但不依赖其他脚本（如轮播初始化）：用
defer，按书写顺序执行，且一定在 DOM 解析完后 - 别再手动拖到
