DOM树深度≥7需重构，≥10属高危；节点超2000个易引发reflow卡顿；优先删除无语义、无样式、纯结构包裹层，用CSS替代冗余DOM节点，组件开发中善用Fragment或display: contents扁平化结构。
怎么快速确认你的DOM树是否过深
别靠肉眼数缩进，HTML源码和最终渲染DOM常不一致。必须查真实渲染树：node.depth才是唯一可信指标。打开Chrome DevTools → Elements面板，右键任意节点 → 选择Show DOM properties，直接看node.depth值：≥7 就该动手重构；≥10 已属高危。顺手跑一句document.querySelectorAll('*').length：超2000个节点，reflow卡顿大概率已发生。
删掉哪些嵌套才真正有效
真正拖慢渲染的不是“最深那一层”，而是既无语义、又没样式、纯为撑结构堆出来的包裹层。这些是优先开刀对象：
<div class="wrapper"><div class="container"><div class="row">——三连无意义容器，Grid一行就能替代 <li> <code><main></main>被套在<section><div class="page">里——语义标签被冗余父容器包围，浏览器无法跳过其子树解析 <li> <code><button>点击</button>外硬塞三层<span></span>只为hover效果——样式计算链翻倍，且无障碍支持断裂-
<fieldset></fieldset>里再套<div><legend>——<code>fieldset.elements只返回直属子控件，深层字段JS遍历会漏，读屏器也跳过中间<legend></legend>用CSS替代DOM节点的典型场景
多数“看起来要嵌套”的视觉效果，单层DOM + CSS就能搞定。加一层
<div>不是加结构，是加计算负担： <ul> <li>卡片阴影+圆角？直接在<code><section></section>或<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>上设border-radius、box-shadow、overflow: hidden - 内边距隔离背景？用
padding+background-clip: padding-box，别加<div class="padding-box"> <li>分隔线？用<code>border-bottom或::before伪元素，不额外加<hr>或<div class="divider"> <li>带图标的输入框？用<code><label><svg></svg><input></label>直接组合，别写三层嵌套 - 清除浮动？删掉
<div style="clear:both">，改用<code>::after { content: ""; display: table; clear: both; }框架组件里的隐形深度累加器
React/Vue组件默认返回一个
<div>作为根节点，这是DOM深度的隐形累加器。尤其当组件层层嵌套时，虚拟DOM深度会映射为真实DOM深度：<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> <ul><li>Vue单文件组件未启用<code><template></template>根节点扁平化，编译后自动包裹<div> <li>React中避免写<code>return <div><child></child></div>，优先用>或<fragment></fragment> - SSR模板中重复的
<div data-reactroot> + <code><div id="root"> + <code><div class="app">三层同质化容器，通常只需保留最内层 <li> <code>display: contents在Chrome 65+/Firefox 63+中可让父元素不生成box，但会丢失该节点上的事件监听和border等属性，慎用于交互容器
最易被忽略的是：DOM扁平了，但CSS选择器仍写着.page .header .nav .item a——浏览器照样从每个a开始逐层往上验证.page是否存在。性能损耗来自匹配路径长度，不是节点数量本身。
