dom节点内存开销按“实例+关联结构”计算，空占1.2–1.8 kb，带属性或事件可达3–5 kb；深层嵌套、空白文本节点（0.3–0.5 kb/个）、未清理的detached节点均显著推高内存占用。
DOM节点内存开销不是按字节算，而是按“实例+关联结构”算
浏览器解析HTML时，并不给每个标签分配固定大小的内存块。真正占用空间的是生成的 DOM 节点对象（Element、Text、Comment等），以及它背后绑定的样式计算缓存、布局信息、事件监听器列表、属性映射表等。实测表明，一个空<div>在 Chrome 中平均占 1.2–1.8 KB；若带 class、style、dataset 或绑了事件，很容易涨到 3–5 KB。<p>关键点在于：节点不是孤立存在的。深层嵌套会放大间接开销——比如父节点要维护子节点链表、样式继承需遍历祖先链、事件冒泡路径变长也会增加内部引用计数。</p>
<ul>
<li>不要用<code><div><div><div><p>文本</p></div></div></div>这种结构，它比<p>文本</p>多建至少 3 个无意义节点，白占 4–6 KB 内存
DocumentFragment插入节点时不触发 layout/paint，且不计入$$('*').length统计，适合批量构建<my-card></my-card>）本身不额外增重，但connectedCallback里生成 Shadow DOM 或递归创建子节点，就会实打实吃内存注释和空格文本节点也占内存，但方式不同
HTML 注释<!-- ... -->不会生成 DOM 节点，但解析器必须扫描识别并丢弃——这个过程消耗栈空间和临时字符串缓冲区。当注释块体积大（单块 >100 KB）或占比超 HTML 总体积 5%，V8 的字符串暂存区（StringTable）分配量会上升，尤其在 SSR 模板中动态注入<!-- DEBUG: ... -->时，这些字符串可能被 JS 上下文意外捕获，变成 GC 难以回收的“钉子”。
空白文本节点（如换行缩进产生的Text节点）则真·占内存：每个约 0.3–0.5 KB。它们虽小，但数量多时（比如模板引擎未开启压缩、服务端输出大量换行），会显著推高$$('*').length值。
- 服务端渲染时启用 HTML 压缩（移除多余空白和注释），比客户端靠 JS 清理更高效
- 避免在
<script></script>或<style></style>标签内写 HTML 注释——解析器仍会扫描，但语义无效，纯属浪费 - 用
document.createTextNode('')替代空字符串拼接，可减少不必要的 Text 节点创建
流式解析能绕过 DOM 树内存分配，但得自己管好引用
像 sax 或 gumbo-parser 这类流式解析器根本不构建完整 DOM 树，自然不分配节点内存。它们只在触发opentag/text等事件时，把当前标签名、属性、文本内容作为轻量 JS 对象传给你。内存占用稳定在几 MB，与 HTML 文件大小基本无关。
但危险就藏在“你自己怎么处理这些数据”里。常见错误是：在onopentag回调里把整个node对象 push 到全局数组，或者用 Map 缓存 node 引用——这等于手动造了一棵 Detached DOM 树，V8 GC 看不见它，内存就永远卡住。
- 只提取必要字段（如
node.attributes.href、node.children[0]?.data），立刻丢弃原始node引用 - 需要跨标签关联时（比如匹配
<item></item>和其子<title></title>），用栈记录路径（['rss', 'channel', 'item']），匹配后清空，不存任何节点指针 - Node.js 环境下用
gumbo_parse()后，必须调用gumbo_destroy_output()，否则 C 层内存永不释放
判断节点是否真被释放，别信 performance.memory
performance.memory.usedJSHeapSize 只反映 JS 堆，而 DOM 节点内存一部分在堆外（如渲染树、图层纹理）。它容易受 GC 时机干扰，且 Firefox/Safari 不支持。更可靠的方式是看节点总数：$$('*').length。
执行一次操作闭环（比如加载列表页 → 滚动 → 返回），前后两次运行$$('*').length。如果数值稳定增长（如每次 +480），说明有 Detached 节点没被清理——此时 Heap Snapshot 里搜 HTMLDivElement 或 Text，Delta 列正向增长，基本就是事件监听器没解绑、闭包捕获了 DOM、或全局变量还持有着旧节点引用。
- 别用匿名函数绑事件：
el.addEventListener('click', () => {})→ 无法配对removeEventListener - 组件卸载时，显式清理：
clearTimeout、AbortController.abort()、ctx.clearRect()、URL.revokeObjectURL() - 缓存 DOM 节点优先用
WeakMap或WeakRef，而不是普通对象或数组
