删掉冗余DOM层级能显著提升querySelector性能并修复Flex布局问题。具体包括：减少匹配路径长度、避免无语义包裹层、确保flex直接子元素有效性、慎用display: contents、规避非法HTML嵌套及语义失效。
为什么删掉一层能让querySelector快一倍
DOM层级越深，document.querySelector匹配路径越长，浏览器需逐层回溯祖先节点验证选择器。删掉一层无语义的
，不仅减少节点创建开销，还让选择器从.wrapper .container .main .content缩成.main .content——匹配速度提升明显，尤其在含百个节点的页面中。
常见错误：用<div class="card"><div class="card__body"><div class="card__content">…</div></div></div>，其中card__body和card__content都只是视觉分组，没语义职责。
- 检查每个是否带class/id/内联样式；全无？直接删
- 用DevTools选中目标元素，看“Elements”面板里它上面有没有连续两层空
- 替换方案：
<article class="card">…</article>代替外层<div class="card">，<code><section class="card__body">…</section>代替中间层
flex容器里多套一层就失效了
Flex布局只作用于**直接子元素**。写<div class="flex"><div><div class="item">内容</div></div></div>时，中间那层
成了flex item，而.item只是它的子元素，不受justify-content或flex-grow控制。
调试时看“Computed”面板里目标元素的display值：如果显示block而非flex或inline-flex，说明它没被正确纳入flex上下文。
立即学习“前端免费学习笔记（深入）”；
- 修复方式：把
display: flex移到更内层容器上，或直接删掉冗余包裹层
- 别给
<nav></nav>或<header></header>外再套<div class="nav-wrapper">——它们本身支持<code>display: flex
- Vue中避免
<div v-for="…"><div class="item">…</div></div>，改用<template v-for="…"><div class="item">…</div></template>
display: contents不是万能的，但能救急
display: contents让父元素退出渲染树，子元素直接受上层flex/grid控制，DOM结构不变，但重排范围大幅收窄。但它不支持IE，且对<form></form>、<table>这类有强制语义的标签乱用会出问题——比如<code><form style="display: contents"></form>可能导致内部<input>失焦。
适用场景：框架生成的<div data-v-xxx>、BEM结构里纯为命名隔离加的包裹层。
<ul>
<li>Safari 15.4+、Chrome 65+、Firefox 63+支持；Edge 79+起支持</li>
<li>用<code>getComputedStyle(el).height查不到值，返回auto
- 别指望它保留可访问性：屏幕阅读器会跳过
display: contents父节点，但子节点仍可读
嵌套超4层时，先别动CSS，先看是不是标签用错了
HTML规范明确禁止某些嵌套，比如<p></p>里放<div>，浏览器会自动拆解成<code><p></p>
<div>…</div>
<p></p>，多出节点、打断文本流、影响FCP。同样，<ol></ol>直接子节点必须是<li>，否则编号重置、JS查询漏项。
真正该警惕的不是“能不能嵌”，而是“值不值得嵌”。一个按钮被包在4层
里，大概率不是布局需要，而是BEM类名规则没想清，或组件返回时没用
- 用VS Code插件“HTMLHint”在保存时拦截非法嵌套
- 检查
<main></main>是否被<div>或<code><section></section>包裹——W3C明令禁止，语义直接失效
- 列表项用
<ul><li>…</li></ul>，别用<div><div><div>…</div></div></div>
嵌套优化最难的不是删代码，而是每次加一层
前，得确认它有没有不可替代的语义或布局职责——而不是因为“以前都这么写”或者“CSS好写了点”。
DOM层级越深，document.querySelector匹配路径越长，浏览器需逐层回溯祖先节点验证选择器。删掉一层无语义的
.wrapper .container .main .content缩成.main .content——匹配速度提升明显，尤其在含百个节点的页面中。
常见错误：用<div class="card"><div class="card__body"><div class="card__content">…</div></div></div>，其中card__body和card__content都只是视觉分组，没语义职责。
- 检查每个是否带class/id/内联样式；全无？直接删
- 用DevTools选中目标元素，看“Elements”面板里它上面有没有连续两层空
- 替换方案：
<article class="card">…</article>代替外层<div class="card">，<code><section class="card__body">…</section>代替中间层flex容器里多套一层
就失效了Flex布局只作用于**直接子元素**。写
<div class="flex"><div><div class="item">内容</div></div></div>时，中间那层成了flex item，而.item只是它的子元素，不受justify-content或flex-grow控制。调试时看“Computed”面板里目标元素的
display值：如果显示block而非flex或inline-flex，说明它没被正确纳入flex上下文。立即学习“前端免费学习笔记（深入）”；
- 修复方式：把
display: flex移到更内层容器上，或直接删掉冗余包裹层 - 别给
<nav></nav>或<header></header>外再套<div class="nav-wrapper">——它们本身支持<code>display: flex - Vue中避免
<div v-for="…"><div class="item">…</div></div>，改用<template v-for="…"><div class="item">…</div></template> - 别指望它保留可访问性：屏幕阅读器会跳过
display: contents父节点，但子节点仍可读
display: contents不是万能的，但能救急
display: contents让父元素退出渲染树，子元素直接受上层flex/grid控制，DOM结构不变，但重排范围大幅收窄。但它不支持IE，且对<form></form>、<table>这类有强制语义的标签乱用会出问题——比如<code><form style="display: contents"></form>可能导致内部<input>失焦。适用场景：框架生成的
<div data-v-xxx>、BEM结构里纯为命名隔离加的包裹层。 <ul> <li>Safari 15.4+、Chrome 65+、Firefox 63+支持；Edge 79+起支持</li> <li>用<code>getComputedStyle(el).height查不到值，返回auto嵌套超4层时，先别动CSS，先看是不是标签用错了
HTML规范明确禁止某些嵌套，比如
<p></p>里放<div>，浏览器会自动拆解成<code><p></p> <div>…</div> <p></p>，多出节点、打断文本流、影响FCP。同样，<ol></ol>直接子节点必须是<li>，否则编号重置、JS查询漏项。真正该警惕的不是“能不能嵌”，而是“值不值得嵌”。一个按钮被包在4层
里，大概率不是布局需要，而是BEM类名规则没想清，或组件返回时没用Fragment。- 用VS Code插件“HTMLHint”在保存时拦截非法嵌套
- 检查
<main></main>是否被<div>或<code><section></section>包裹——W3C明令禁止，语义直接失效 - 列表项用
<ul><li>…</li></ul>，别用<div><div><div>…</div></div></div>
嵌套优化最难的不是删代码，而是每次加一层
前，得确认它有没有不可替代的语义或布局职责——而不是因为“以前都这么写”或者“CSS好写了点”。 - 用DevTools选中目标元素，看“Elements”面板里它上面有没有连续两层空
