删掉没用的嵌套比加优化更直接有效：DOM节点每增100个拖慢解析20–40ms；用DevTools检查nodeDepth、运行querySelectorAll查空壳div、搜索div[class]验证样式绑定、清理CMS占位符、语义化替换并注意兼容性。
冗余嵌套不是“写得不够漂亮”的问题，而是浏览器解析时实实在在多花的20–40ms/100个节点——删掉一层没用的 <div>，比加一堆优化配置更直接有效。
<h3>怎么快速定位哪些 <code><div> 是真冗余
<p>别靠肉眼猜。打开 DevTools → Elements 面板，用以下组合方式交叉验证：</p>
<ul><li>右键任意父级 <code><div> → “Show DOM properties”，看 <code>nodeDepth 值：超过6就要动手
document.querySelectorAll('div:not([class]):not([id]):not([data-*])').length，查纯空壳 <div>
<li>CSS 面板中搜索 <code>div[class]，逐个点开匹配规则——没对应样式、也没 JS 绑定的，整行删<div data-id="xxx"> 这类占位符，只要没 <code>addEventListener 绑定，一律清掉
用语义化标签替代时要注意的兼容性坑
替换不是无脑 find-and-replace，浏览器对语义标签有隐式默认样式和解析行为差异：
-
<header></header>、<nav></nav>、<main></main>在所有现代浏览器中解析更快，但 IE11 不识别它们的语义（仅当需支持 IE 时才需 polyfill） - 别把
<section></section>当万能筐：它必须有明确主题边界，<section><div><h2></h2></div></section>中的<div> 仍是冗余，应改为 <code><section><h2></h2></section> -
<aside></aside>不等于“右边栏”，它表示与主内容关联度低的旁支信息；误用会干扰屏幕阅读器逻辑流 - 保留原有 class 名（如
<div class="card-body"> → <code><article class="card-body"></article>），避免样式断裂display: contents能否代替删标签可以临时绕过渲染层，但不能替代结构清理：
立即学习“前端免费学习笔记（深入）”；
-
display: contents让父容器不生成 Box，子元素直接挂到上层 DOM 节点下——视觉效果像删了，但 DOM 树里还在，JS 仍能访问、屏幕阅读器仍会遍历 - IE 完全不支持，Edge 79+ 才开始支持，移动端 Safari 15.4+ 才稳定；若需兼容旧环境，别依赖它
- 它解决的是“视觉冗余”，不是“解析冗余”：DOM 节点数没减，
nodeDepth不变，首屏解析耗时照样高 - 适合场景：组件封装时隐藏包装层（如 React 的
Fragment替代），而非页面级 HTML 结构治理
真正卡性能的从来不是“要不要加优化”，而是“敢不敢删掉那三层没用的
<div>”。DOM 节点数、嵌套深度、语义准确性——这三项在 DevTools 里一眼可见，改完立刻见效，不需要等构建、不用发版，但很多人就是拖着不点那个删除键。</div> -
