嵌套超过6层会直接拖慢fcp 200ms以上，因浏览器流式解析时每层均增加dom创建、样式匹配与布局计算开销，低端设备尤为显著；应通过devtools查depth值并重构，优先用语义化标签替代冗余div。
嵌套超过6层会直接拖慢FCP，且在低端设备上更明显
浏览器解析HTML是流式自上而下进行的，每多一层嵌套，就多一次DOM节点创建 + 样式匹配 + 布局计算。这不是理论值——在搭载Android 10的千元机或iOS 14旧款设备上，
<div><div><div><div><div><p></p></div></div></div></div></div> 这种结构会让首次内容绘制（FCP）延迟200ms以上。
- 用 Chrome DevTools → Elements 面板右键任意节点 →
Show DOM properties 查看 <code>depth值，超过6就要重构 -
<section></section>、<main></main>、<article></article>替代三层以上<div class="wrapper"> 堆叠，语义标签本身不增加解析开销 <li>特别注意 SSR 或框架生成的 HTML，比如 Next.js 输出的 <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/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div></td> - 正确写法：直接给
<td> 加类或内联样式，或用 <code><figure></figure>+<figcaption></figcaption>替代无意义包裹 - 若必须用容器，优先选
<span></span>（行内容器），避免触发块级布局重算 - 同步脚本放在
：DOM树几乎为空，用户看到纯白屏 - 同步脚本放在
底部：DOM已构建完，但JS执行仍阻塞paint任务，文字可见但无样式/交互 - 真正安全的选择只有两个：
defer（保序、不阻塞解析、DOMContentLoaded前执行）或放前（确保DOM就绪） - 每次
innerHTML = str都要重新解析、构建节点、触发重排预备，JS执行期间无法做这事 - 克隆
template.content：只做内存复制，不触发布局/样式计算，JS执行完立刻可插入 - 注意：
template.content是DocumentFragment，不能直接querySelector，得先挂载或用遍历
script位置不当会让主线程“卡死”更久
不是JS代码慢，而是它抢占了主线程——浏览器遇到未加
defer或async的<script></script>，会立刻暂停HTML解析器，把控制权交给JS引擎。此时哪怕只有一行console.log(1)，首屏DOM树也建不完。template.content克隆能绕过主线程争抢
<template></template>的内容不参与HTML解析流程，也不触发JS执行、资源加载或样式计算。它只是内存中一个惰性的DocumentFragment。当你用document.importNode(template.content, true)克隆插入时，浏览器跳过了从字符串解析HTML的全部开销——这部分原本要跑在主线程上，和JS执行争时间片。flex容器、通配符选择器（*{}）或inherit值混用时，样式计算耗时可能翻倍。最易被忽略的是：你改了JS逻辑或CSS动画，却没动那几层“看起来无害”的<div>，结果瓶颈始终卡在结构层。</div> - 错误写法：
