dom层级冗余典型结构是连续三层以上无样式、无事件、无语义的嵌套，深度>6且中间节点无class、内联样式及绑定事件。
怎么识别 DOM 层级冗余的典型结构
浏览器内存碎片化往往不是因为单个大对象，而是大量小而散的 DOM 节点 + 未释放引用共同导致的。冗余层级最常藏在“看不见”的地方：比如连续三层 <div> 套 <code><div> 套 <code><p></p>，或框架生成的无样式/无事件 wrapper（如 <div id="app"> 下又套一层 <code><div class="container">）。这类结构在 Elements 面板里一眼就能看出深度 > 6，且中间节点既没 class、也没内联样式、更没绑定事件。
<ul><li>用 Chrome DevTools → Elements 面板，Ctrl+F 搜索 <code><div><div> 或 <code><div><div><div> 连续出现的位置
<li>右键节点 → “Break on subtree modifications”，再操作页面，看哪些冗余容器被频繁插入/移除</li>
<li>Lighthouse 的 “Avoid an excessive DOM size” 报告里，若 <code>DOM nodes > 1500 且 maximum DOM depth > 12，基本可判定存在结构性冗余
删 div 前必须确认的三件事
盲目删 <div> 可能导致样式错乱或 JS 功能失效——不是所有 wrapper 都冗余。关键看它是否同时满足：无 CSS 生效、无 JS 绑定、无语义作用。
<ul><li>检查 computed styles：选中该 <code><div>，右侧 Styles 面板里没有来自外部 CSS 或内联 style 的有效声明（border/margin/padding/display 等全为默认值）
<li>检查事件监听器：右侧 Event Listeners 标签页为空，或只有捕获阶段的空函数（如 <code>function() {}）
getComputedStyle(el).display === 'contents'，如果是，则该节点本就不参与布局，纯属占位，可安全移除React/Vue 中怎么避免生成冗余 wrapper
框架默认会包裹一层 <div>，但并非必须。现代方案已支持绕过它，前提是组件返回结构足够干净。
<ul><li>React 16+：用 <code>>（Fragment）替代外层 <div>，但注意 Fragment 不支持 key 和 ref；若需 key，改用 <code><react.fragment key="xxx"></react.fragment>
<template></template> 根节点天然支持多元素，无需 wrapper；若用 <script setup></script>，直接 return 多个标签即可<div id="__next"> 是必需的，但其子节点（如 <code><main></main>）可直接写语义标签，不必再套 <div class="wrapper">
<h3>清理后为什么内存没降？关键漏点在这里</h3>
<p>删完 HTML 结构只是第一步。如果 JS 里还存着对旧节点的引用，或者事件监听器没解绑，那些节点就变成 <code>Detached DOM tree，GC 不回收，内存照涨。
- Chrome Memory tab → Heap snapshot → 搜索
Detached，90% 结果指向仍被闭包或全局变量持有的节点 - 检查是否用了
document.getElementById或querySelector获取节点后赋给了长期存活变量（如window.cacheEl），应改用WeakMap缓存 - 动态插入内容后，别只删 HTML，还要调
el.removeEventListener—— 特别注意匿名函数无法移除，必须用具名函数或AbortSignal控制
结构扁平本身不省内存，省的是间接开销：样式计算缓存、事件冒泡路径、布局树节点数。真正释放内存，得让 JS 引用链彻底断掉。
