不能直接用 querySelectorAll('[hidden]') 批量删隐藏元素，因为 hidden 属性仅表示“当前不相关”，删除会导致交互中断、状态错乱；remove() 不识别样式，需结合 getComputedStyle 精确判断 display: none 等真实隐藏状态，并过滤媒体元素、带 data-persist 的容器及 aria-hidden="false" 节点，删前须清理事件、定时器、Observer 和组件实例，防止内存泄漏。
为什么不能直接用 querySelectorAll('[hidden]') 批量删隐藏元素
因为 hidden 是 HTML5 布尔属性，仅表示“当前不相关”，它本身不等于“该删”，更不等于“DOM 中无用”。很多框架（如 Vue、React）或服务端渲染会动态加 hidden 控制显隐，删掉它们会导致交互中断、状态错乱。真实场景中，hidden 元素常承载关键逻辑（比如预加载的弹窗容器、未展开的详情区），盲目删除等同于砍掉功能枝干。
remove() 能删 display: none 元素吗？不能，得先定位再删
remove() 不关心样式，只删 DOM 节点。但 display: none 的元素仍存在于 DOM 树中，必须先用 CSS 选择器抓到它们，再调用 remove()。常见误操作是写 document.querySelectorAll('div[style*="display: none"]') —— 这种写法极不可靠：内联样式可能被压缩（display:none）、可能带空格或单位（display: none !important）、也可能由外部 CSS 类控制，根本匹配不到。
稳妥做法是结合计算样式判断：
- 用
getComputedStyle(el).display === 'none'精确识别真正不可见的元素 - 但注意：该方法对未挂载元素（如
document.createElement('div')）返回空字符串，需先 append 到 body 再测（开发时慎用） - 批量处理时建议加防抖或节流，避免重排风暴；尤其表格/列表节点多时，
getComputedStyle开销明显
批量删隐藏元素前，必须过滤这三类节点
不是所有视觉不可见的元素都该删。以下节点即使 display: none 或 visibility: hidden，也应跳过：
-
iframe、canvas、video等媒体元素：可能正在后台加载、解码或监听事件 - 含
data-persist、data-keep-alive等自定义属性的容器：通常是框架缓存标记，删了会丢状态 - 父级有
aria-hidden="false"或tabindex="0"的元素：说明对可访问性有明确意图，删掉影响读屏器
示例过滤逻辑：
const candidates = document.querySelectorAll('*');
const toRemove = [];
for (const el of candidates) {
const style = getComputedStyle(el);
if ((style.display === 'none' || style.visibility === 'hidden') &&
!el.matches('iframe, canvas, video') &&
!el.hasAttribute('data-persist') &&
el.getAttribute('aria-hidden') !== 'false') {
toRemove.push(el);
}
}
toRemove.forEach(el => el.remove());
删完记得手动清理关联资源，否则内存泄漏真会发生
DOM 节点被 remove() 后，JavaScript 引用若未释放，浏览器 GC 不会回收——尤其当这些元素曾绑定过事件、定时器、或被闭包长期持有时。
关键动作必须做：
- 删前保存并移除事件监听器：
el.removeEventListener('click', handler)，别依赖自动解绑 - 清除定时器 ID：
if (el._timerId) clearTimeout(el._timerId) - 解除 MutationObserver 实例：
if (el._observer) el._observer.disconnect() - Vue/React 组件容器删掉后，务必确认其根实例已
$destroy()或unmount()，否则响应式数据持续占用内存
最易忽略的一点：删掉的元素若曾作为 fetch 请求的 signal abort controller 目标，要同步调用 controller.abort()，否则请求悬而未决，可能触发重复回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
