HTML结构复杂度直接影响主线程渲染帧率，嵌套超6层、滥用table、script位置不当及innerHTML拼接等均会显著增加Layout耗时，导致FPS跌破30；应优先用语义化标签、设table-layout:fixed、加defer/async、用template克隆替代innerHTML。
HTML结构复杂度直接影响主线程渲染帧率（FPS），尤其在低端设备上——嵌套超6层、表格滥用、冗余包裹，会让每帧Layout计算时间翻倍，直接拖垮60fps底线。
DOM嵌套深度超过6层会显著降低FPS
浏览器解析HTML是流式过程，每层嵌套都增加DOM节点创建、样式匹配和布局计算开销。实测中，在Android 10千元机上，
<div><div><div><div><div><p></p></div></div></div></div></div> 这种结构会让单帧Layout耗时从8ms升至25ms以上，FPS跌破30。</p> <ul> <li>用Chrome DevTools → Elements面板右键任意节点 → <code>Show DOM properties查看
depth值，超过6就要重构
<section></section>、<main></main>、<article></article>替代三层以上<div class="wrapper">堆叠——语义标签不增加解析负担，还能缩短CSS选择器匹配链
<li>SSR框架（如Next.js）生成的HTML常自带两层无意义包裹，比如<code><div data-reactroot>外再套<code><div id="app">，需手动检查父容器层级
<h3>table布局在重排场景下FPS波动剧烈</h3>
<p>表格单元格本身样式计算成本就高，一旦内部再嵌套<code><div>或使用<code>position: relative，浏览器必须在每次重排前重新计算整行列宽，极易触发同步Layout，帧率抖动明显。
- 错误写法：
<td><div class="cell-content"> <p>文本</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a> <p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></td>—— 触发整行重排 - 正确做法：直接给
<td>加类或内联样式；若需语义化容器，用<code><figure></figure>+<figcaption></figcaption>替代 - 大数据表格务必设
table-layout: fixed，否则浏览器要扫描全部<td>内容才能定列宽，50行×10列即可卡顿 <h3>script位置不当导致主线程长期阻塞</h3> <p>没加<code>defer或async的<script></script>标签会强制暂停HTML解析，把控制权交给JS引擎——哪怕只有一行console.log()，也会让首屏DOM树建不完，后续所有帧都等它释放主线程。- 非关键脚本（统计、埋点、第三方SDK）一律加
defer，保证顺序执行且不阻塞解析 - 纯交互逻辑（如按钮绑定）可用
async，但注意它可能在DOMContentLoaded前执行，DOM未就绪就报TypeError: Cannot read property 'addEventListener' of null - 真要操作DOM的脚本，放
- 非关键脚本（统计、埋点、第三方SDK）一律加
