dom嵌套超过6层会直接拖慢fcp 200ms以上，因浏览器流式解析时每层均增加dom创建、样式匹配与布局计算开销，低端设备尤为显著；应通过devtools查depth值并重构，优先用语义化标签替代冗余div。

DOM嵌套超过6层会显著拖慢FCP

不是理论值，是实测结果：在Android 10千元机或iOS 14旧款设备上，<div><div><div><div><div><p></p></div></div></div></div></div>这种结构会让首次内容绘制（FCP）延迟200ms以上。浏览器流式解析时，每层嵌套都触发一次DOM节点创建 + 样式匹配 + 布局计算，低端设备尤其吃不消。

实操建议：

• 用 Chrome DevTools → Elements 面板右键任意节点 → Show DOM properties 查看 depth 值，超过6就要重构
• 优先用 <section></section>、<main></main>、<article></article> 替代三层以上 <div class="wrapper"> 堆叠——语义标签本身不增加解析开销<li>特别注意 SSR 或框架（如 Next.js）生成的 HTML：<code><div data-reactroot> 外层常被无意加深两层，需手动检查父容器是否冗余<h3>表格单元格里嵌套<div>极易触发同步Layout<p><code><td> 内部样式计算本就比普通块级元素重，再套一层 <code><div>，尤其当该 <code><div> 含 <code>display: flex 或 position: relative 时，浏览器必须在每次重排前重新计算整行表格的列宽与布局关系，导致整行甚至整表重排。

  错误写法：<td><div class="cell-content"><p>文本</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div></td>
  正确做法：

  • 直接给 <td> 加类或内联样式，避免无意义包裹<li>若需图文组合，用 <code><figure></figure>+<figcaption></figcaption> 替代 <div> <li>必须用容器时，选 <code><span></span>（行内容器），而非块级元素，避免触发额外BFC和整行重算

  script位置不当会让主线程“卡死”更久

  不是JS代码慢，而是它抢占了主线程——浏览器遇到未加 defer 或 async 的 <script></script>，会立刻暂停HTML解析器，把控制权交给JS引擎。此时哪怕只有一行 console.log(1)，首屏DOM树也建不完。

  实操建议：

  • 非必要逻辑（统计、埋点、第三方SDK）一律加 defer，确保按顺序执行但不阻塞解析
  • 纯交互逻辑（按钮点击绑定）可用 async，但注意它不保证执行顺序，且可能在DOM未就绪时运行
  • 真需要操作DOM的脚本，放