冗余节点指无css生效、无js绑定、无语义作用的dom节点，需通过devtools检查computed styles、事件监听器及父/子依赖综合判定。
怎么判断哪些 DOM 节点真冗余？别只看有没有 class
冗余节点不等于“没 class”，而是“没职责”。一个 <div> 即使带了 <code>class="wrapper"，如果它既没被 CSS 选中、也没被 JS 查询（document.querySelector('.wrapper') 返回 null）、还不承载语义（比如没包裹 <main></main> 或 <section></section>），那它就是纯套壳。Chrome DevTools Elements 面板里右键节点 → “Break on > attribute modification”，再操作页面，如果这个 <div> 完全不触发断点，基本可判定为死节点。
<p>常见误判点：</p>
<ul><li>以为 <code><div id="app"> 是冗余——其实它是 Vue/React 的挂载点，删了 JS 就失效
<li>看到 <code><div class="clearfix"> 就删——但它的 <code>::after 伪元素可能还在清除浮动，得查 CSS 源码
<div><img></div> 当冗余——若父 <div> 有 <code>display: flex 或 text-align: center，它就承担布局职责
VSCode 正则批量删空标签和无用属性
空标签如 <div></div>、<p></p>、<span></span> 可直接干掉；但注意 <img>、<input> 这类自闭合标签不算空，别误杀。
在 VSCode 中打开正则替换（Ctrl+H → 点 .* 图标）：
- 删空标签：
]*)>，替换为空。它能匹配<div></div>，但不会误伤<div>内容</div> - 删空属性：
\s+(class|id|style|data-[^=]+)=""，替换为空。避免留下class=""这种无效残留 - 删内联样式（保留结构）：
\s+style="[^"]*?"，替换为空。比删整行更安全，不碰其他属性
⚠️ 注意：<script></script> 和 <style></style> 标签里的内容不能用这组正则——它们内部的引号会干扰匹配，得单独处理。
嵌套太深时，querySelector 性能怎么救？
document.querySelectorAll('.card .content .btn') 这种写法在 DOM 深度超过 6 层时，低端机上匹配耗时可能翻倍。不是语法错，是浏览器得为每个 .btn 向上遍历多层父节点验证路径。
改用分步定位：
- 先用
const card = document.querySelector('.card.active')拿到具体容器 - 再调
card.querySelectorAll('.content .btn')或更窄的card.querySelector('button') - 避免
getElementsByClassName返回的实时集合——每次读.length都触发样式重计算，换成querySelectorAll的静态 NodeList
滚动监听等高频场景里反复查 DOM？立刻缓存引用，或直接用事件委托绑定到 document 上，靠 event.target.matches('.btn') 判断。
删完还得验：回归测试容易漏哪几处？
清理后最常崩的是三类地方：
- CSS 里用到了被删节点的层级关系，比如
.parent > .child > .target，删掉中间一层，样式就失效 - JS 里硬编码了 DOM 路径，像
el.parentNode.parentNode.nextSibling，节点扁平化后链就断了 - 无障碍访问（a11y）受损：原来靠
<div role="navigation"> 提供语义，删掉后屏幕阅读器找不到导航区 <p>真实设备必测——特别是 iOS Safari，它对缺失闭合标签或非法嵌套更敏感；用 Lighthouse 跑一次 Accessibility 审计，比肉眼检查更准。</p> </div>
