DOM深度≥7需重构，≥10属高危；用Chrome DevTools右键节点→“Show DOM properties”查node.depth值，超2000个节点易触发reflow卡顿。
怎么一眼看出DOM嵌套是否过深
别靠数缩进，直接看真实渲染树深度。打开Chrome DevTools → Elements 面板 → 右键任意节点 → “Show DOM properties” → 查 node.depth 值：≥7 就该动手；≥10 已属高危。顺手跑一句 document.querySelectorAll('*').length：超2000个节点，reflow卡顿大概率已发生。
为什么删不等于解决问题很多人删掉三层嵌套 <div>，但CSS还写着 .page .header .nav .item a——浏览器照样从每个 a 开始，逐层往上验证 .page 是否存在。真正拖慢的是选择器回溯路径，不是DOM标签数本身。
- DOM扁平但选择器嵌套5层，性能损耗 ≈ DOM嵌套5层 + 选择器嵌套5层
- BEM类名（如
nav__item--active）本质是把结构关系“编译”进类名，让浏览器只查单类，跳过所有向上遍历
- SCSS里滥用
& 嵌套，编译后生成 .theme-dark .menu .menu__item:hover，实际仍是4层匹配链
用语义标签替代嵌套的实操路径不是“删 <div>”，而是“升维换标签”——多数情况下，换一个原生标签就自然砍掉1–2层：
-
<div class="header"><div class="logo"></div></div> → 直接写成 <header><h1></h1></header>，<header> 本身支持 display: flex 和 padding
-
<div><div><div>文字</div></div></div> → 改用 <p>文字</p>
-
<div class="card"><div class="card-body"><p></p></div></div> → 换成 <article><section><p></p></section></article>，语义清晰且层级降为2
哪些嵌套必须保留，哪些能用display: contents隐藏
不是所有 <div> 都该删，关键是判断它有没有承担布局、样式、交互或语义职责。中间层若仅作定位容器、无class/id/style/事件绑定，又不影响可访问性，可用 display: contents 移除渲染盒但保留子元素语义流。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
<div data-testid="card-wrapper"><p>内容</p></div> → 改为 <div data-testid="card-wrapper" style="display: contents"><p>内容</p></div>
- 注意兼容性：
display: contents 在 Safari 15.4+ 才完整支持，旧版需 fallback 到 Fragment 或条件移除
- 禁用场景：含
aria-live、tabindex、data-* 用于 JS 查询的父层，不能简单提级或隐藏，得重构逻辑而非删节点
真实重构中，最容易被忽略的是语义契约——比如把 class="main" 换成 <main>，若页面已有两个 <main>，Lighthouse 立刻报错；又比如 <nav> 里没套 <ul>，屏幕阅读器会误判为主导航。扁平化不是越浅越好，而是在每层都承担明确角色的前提下，把深度压到4层以内。
很多人删掉三层嵌套 <div>，但CSS还写着 .page .header .nav .item a——浏览器照样从每个 a 开始，逐层往上验证 .page 是否存在。真正拖慢的是选择器回溯路径，不是DOM标签数本身。
- DOM扁平但选择器嵌套5层，性能损耗 ≈ DOM嵌套5层 + 选择器嵌套5层
- BEM类名（如
nav__item--active）本质是把结构关系“编译”进类名，让浏览器只查单类，跳过所有向上遍历 - SCSS里滥用
&嵌套，编译后生成.theme-dark .menu .menu__item:hover，实际仍是4层匹配链
用语义标签替代嵌套的实操路径不是“删 <div>”，而是“升维换标签”——多数情况下，换一个原生标签就自然砍掉1–2层：
-
<div class="header"><div class="logo"></div></div> → 直接写成 <header><h1></h1></header>，<header> 本身支持 display: flex 和 padding
-
<div><div><div>文字</div></div></div> → 改用 <p>文字</p>
-
<div class="card"><div class="card-body"><p></p></div></div> → 换成 <article><section><p></p></section></article>，语义清晰且层级降为2
哪些嵌套必须保留，哪些能用display: contents隐藏
不是所有 <div> 都该删，关键是判断它有没有承担布局、样式、交互或语义职责。中间层若仅作定位容器、无class/id/style/事件绑定，又不影响可访问性，可用 display: contents 移除渲染盒但保留子元素语义流。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
<div data-testid="card-wrapper"><p>内容</p></div> → 改为 <div data-testid="card-wrapper" style="display: contents"><p>内容</p></div>
- 注意兼容性：
display: contents 在 Safari 15.4+ 才完整支持，旧版需 fallback 到 Fragment 或条件移除
- 禁用场景：含
aria-live、tabindex、data-* 用于 JS 查询的父层，不能简单提级或隐藏，得重构逻辑而非删节点
真实重构中，最容易被忽略的是语义契约——比如把 class="main" 换成 <main>，若页面已有两个 <main>，Lighthouse 立刻报错；又比如 <nav> 里没套 <ul>，屏幕阅读器会误判为主导航。扁平化不是越浅越好，而是在每层都承担明确角色的前提下，把深度压到4层以内。
不是“删 <div>”，而是“升维换标签”——多数情况下，换一个原生标签就自然砍掉1–2层：
-
<div class="header"><div class="logo"></div></div>→ 直接写成<header><h1></h1></header>，<header>本身支持display: flex和padding -
<div><div><div>文字</div></div></div>→ 改用<p>文字</p> -
<div class="card"><div class="card-body"><p></p></div></div>→ 换成<article><section><p></p></section></article>，语义清晰且层级降为2
哪些嵌套必须保留，哪些能用display: contents隐藏
不是所有 <div> 都该删，关键是判断它有没有承担布局、样式、交互或语义职责。中间层若仅作定位容器、无class/id/style/事件绑定，又不影响可访问性，可用 display: contents 移除渲染盒但保留子元素语义流。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：
<div data-testid="card-wrapper"><p>内容</p></div>→ 改为<div data-testid="card-wrapper" style="display: contents"><p>内容</p></div> - 注意兼容性：
display: contents在 Safari 15.4+ 才完整支持，旧版需 fallback 到 Fragment 或条件移除 - 禁用场景：含
aria-live、tabindex、data-*用于 JS 查询的父层，不能简单提级或隐藏，得重构逻辑而非删节点
真实重构中，最容易被忽略的是语义契约——比如把 class="main" 换成 <main>，若页面已有两个 <main>，Lighthouse 立刻报错；又比如 <nav> 里没套 <ul>，屏幕阅读器会误判为主导航。扁平化不是越浅越好，而是在每层都承担明确角色的前提下，把深度压到4层以内。
