dom节点复用比创建销毁更省内存，因频繁removechild()+createelement()引发内存抖动、gc延迟及layout飙升；必须用map池化+display:none隐藏复用，禁用innerhtml和动态增删子节点。
DOM节点复用比创建销毁更省内存
大屏或实时监控类页面中，频繁 removeChild() + createElement() 会导致内存抖动：每个新节点至少占用 1–2 KB（含样式、布局、事件绑定缓存），而旧节点被 GC 回收前还残留引用。浏览器不会自动池化 DOM 节点，connectedCallback 只触发一次，disconnectedCallback 在标签页后台、崩溃或滚动快时根本不会执行。
真实代价：一个含 200 个卡片的列表每秒更新 10 次，等效每秒创建/销毁 2000 个节点，低端设备 layout 时间飙升 3–5 倍。
- 必须为每个节点设置唯一
dataset.id，且结构固定（如子元素 class 名不能动态增删） - 复用时只改
textContent、src、dataset等可变字段，不调用innerHTML或appendChild - 隐藏不用
remove()，改用el.style.display = 'none'，再存入Map缓存 - 避免用数组存节点——索引漂移易导致数据错位；
Map查找稳定且无遍历开销
批量操作 DOM 必须用 DocumentFragment
直接在循环里反复调用 appendChild() 会触发多次重排（reflow），每次都要重建 render 树并计算布局，性能断崖式下跌。尤其当插入数百个节点时，主线程卡顿明显。
DocumentFragment 是离线 DOM 容器，所有操作都不触发渲染，直到最后一次性挂载。它不是虚拟 DOM，但效果类似：只引起一次 layout。
- 不要在 fragment 中混用已挂载节点（会自动 detach，引发意外移除）
- 若需保留事件监听器，确保监听器绑定在 fragment 外层容器，并用事件委托
- 对已有节点做移动（非新建），优先用
fragment.appendChild(el)而非el.cloneNode()，避免冗余内存分配 - 注意：IE 不支持
append()方法，统一用appendChild()更稳妥
querySelector 与 getElementsBy* 的内存行为差异
getElementsByClassName 和 getElementsByTagName 返回的是“实时集合（live HTMLCollection）”，内部维护响应式引用。只要 DOM 变动，集合自动更新——这需要浏览器持续追踪节点生命周期，带来额外内存与 CPU 开销。而 querySelectorAll 返回静态 NodeList，只快照当前状态，无后续追踪成本。
- 遍历时务必缓存
length：写for (let i = 0, len = list.length; i ，而非 <code>i —— 每次读取 live 集合的 <code>length都可能触发重计算 - 高频查询场景下，优先用
querySelector('#id')或querySelector('.class')，它们底层走 ID/class 索引，比遍历 collection 快一个数量级 - 避免
document.querySelectorAll('*')：匹配全部节点会强制构建完整 DOM 快照，内存峰值陡升，Chrome 下可能触发 OOM
performance.memory 只能用于调试，别在生产轮询
performance.memory 是 Chrome/Edge 特有 API，返回 usedJSHeapSize、totalJSHeapSize 和 jsHeapSizeLimit，单位字节。它是判断 JS 堆是否逼近瓶颈最直接的方式，但有严重使用限制。
Firefox 和 Safari 完全不支持该接口；即使在 Chrome 中，轮询它本身就有开销，部分版本还会强制触发 GC，反而加剧内存压力。
- 仅在调试阶段做单次快照，例如在关键操作前加条件检查：
if (performance.memory?.usedJSHeapSize > 0.85 * performance.memory.totalJSHeapSize) - 生产环境改用
chrome://memory-internals手动采样，或结合 Performance Observer 监听longtask间接推断内存压力 - 不要监听
beforeunload做清理——该事件不保证执行，且无法捕获后台冻结等场景
DOM 节点不是“用完即焚”的临时对象，而是带状态、样式、布局上下文的重量级实体。优化的关键从来不是“删得更快”，而是“少建、少动、复用稳”。最容易被忽略的一点：哪怕只是把 display: none 改成 visibility: hidden，也会让浏览器继续维护该节点的布局信息——复用时看似省事，实则埋下隐性内存陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
