DOM元素无内置生命周期API，其内存回收取决于是否存在可达的JS引用；移除元素时须手动清理事件监听器、定时器、Observer等引用，否则导致内存泄漏。
DOM元素本身没有严格定义的“生命周期”API（如Vue或React中的created/mounted等钩子），但其在页面中的创建、挂载、更新、移除过程会触发一系列可监听的行为，而内存泄漏常发生在元素被移除后，其相关引用未被释放。关键在于理解节点与JavaScript对象之间的引用关系，以及浏览器的垃圾回收机制如何工作。
DOM节点的“存在周期”由引用决定
一个DOM元素是否被垃圾回收，不取决于它是否还在HTML中，而取决于是否存在**可达的JS引用**。即使调用element.remove()或parent.removeChild(element)，只要还有变量、闭包、事件监听器、定时器等持有对该元素（或其子孙）的引用，它就不会被回收。
- 常见“隐形引用”包括：未解绑的事件监听器（尤其是通过
addEventListener添加的）、全局对象上的属性赋值（如window.myElement = el）、闭包中捕获的DOM引用（如在定时器回调里持续访问el） - 使用
console.dir(el)可查看元素当前所有JS属性和绑定事件；Chrome DevTools的Memory > Take Heap Snapshot能定位哪些对象阻止了DOM节点回收
移除元素时务必清理关联资源
手动清理不是“可选优化”，而是避免泄漏的必要步骤。尤其在动态渲染频繁的场景（如单页应用、列表滚动、弹窗反复打开关闭）中，遗漏清理极易积累不可见的DOM残留。
- 移除前调用
element.removeEventListener(type, handler)——若使用匿名函数则无法解绑，应改用具名函数或AbortController（现代推荐） - 清除定时器：
clearTimeout(timerId)、clearInterval(intervalId) - 断开数据绑定：如使用
MutationObserver，需调用observer.disconnect()；自定义观察逻辑也应提供destroy()方法 - 清空可能缓存DOM引用的变量：
myRef = null（有助于GC标记该引用为“不可达”）
优先使用事件委托代替大量独立监听器
为100个按钮分别绑定click事件，会产生100个函数引用+100个闭包，即使按钮被删，若监听器未解绑，整个父容器及其中所有子节点都可能滞留内存。
立即学习“Java免费学习笔记（深入）”；
- 将事件监听绑定在父级（如
ul），利用事件冒泡和event.target判断来源，只需1个监听器 - 配合
data-*属性传递上下文，避免在监听器中闭包捕获大量局部变量 - 若必须动态增删子项，委托监听天然适配，无需每次重新绑定/解绑
警惕框架外的手动DOM操作与状态耦合
在React/Vue等框架中混用document.getElementById、innerHTML或直接修改element.style，容易绕过框架的生命周期管理，导致状态与DOM不同步，进而引发强制重渲染、重复绑定、或残留引用。
- 避免在组件卸载后仍执行DOM操作（如异步请求返回后调用
el.textContent = ...），应在卸载时设置标志位或取消请求 - 使用
ref（React）或template ref（Vue）获取元素，而非querySelector，确保引用随组件销毁自动失效 - 纯JS项目中，建议封装
createWidget(el)并返回含destroy()方法的对象，统一管理资源生命周期
不复杂但容易忽略。核心就一条：只要你在JS中保存了对DOM元素的引用，就要负责在它不该存在时主动切断。浏览器不会替你猜“这个变量是不是还用得着”。
