面试题：JavaScript 动态删除 DOM 元素时的内存回收问题

内存回收机制基础
- 在 JavaScript 中，当使用 removeChild 方法从 DOM 树中移除一个元素时，浏览器的垃圾回收机制（通常基于标记 - 清除算法）开始起作用。垃圾回收器会定期扫描内存中的对象，标记那些从根对象（如全局对象 window 在浏览器环境中）可达的对象为活动对象，而那些不可达的对象则被视为垃圾对象，其占用的内存会被回收。
- 当一个 DOM 元素从 DOM 树中移除后，它不再通过 DOM 树的层级关系从根节点可达。如果没有其他对该元素的引用，它就变成了垃圾对象，垃圾回收器会在后续的扫描中回收其内存。
事件绑定复杂情况
- 事件委托：如果事件绑定采用的是事件委托方式，即事件绑定在父元素上，而不是直接绑定在要删除的子元素上，那么当子元素被 removeChild 移除后，由于子元素本身没有直接的事件处理函数引用，所以通常不会因为事件绑定导致内存泄漏。
- 直接绑定事件：当元素有直接绑定的事件处理函数时，情况会复杂一些。例如：
```
const element = document.createElement('div');
element.addEventListener('click', function () {
    console.log('Clicked');
});
document.body.appendChild(element);
```
- 如果不做处理，即使使用 removeChild 移除 element，由于事件处理函数内部可能持有对 element 的引用（闭包），垃圾回收器可能会认为 element 仍然可达，从而导致内存无法回收。
- 确保内存正确回收的方法
  - 移除事件监听器：在调用 removeChild 之前，显式地移除事件监听器。
```
const element = document.createElement('div');
const clickHandler = function () {
    console.log('Clicked');
};
element.addEventListener('click', clickHandler);
document.body.appendChild(element);
// 移除事件监听器
element.removeEventListener('click', clickHandler);
document.body.removeChild(element);
```
  - 使用箭头函数：如果事件处理函数使用箭头函数，由于箭头函数本身没有自己的 this 和 arguments，它不会创建额外的闭包来持有对 element 的引用。例如：
```
const element = document.createElement('div');
element.addEventListener('click', () => {
    console.log('Clicked');
});
document.body.appendChild(element);
document.body.removeChild(element);
```
- WeakMap 管理：可以使用 WeakMap 来管理事件监听器。WeakMap 的键是弱引用的，当键（如 DOM 元素）不再有其他强引用时，垃圾回收器可以回收该键及其对应的值。例如：
```
const eventListeners = new WeakMap();
const element = document.createElement('div');
const clickHandler = function () {
    console.log('Clicked');
};
eventListeners.set(element, clickHandler);
element.addEventListener('click', clickHandler);
document.body.appendChild(element);
// 移除元素前清理操作
const handler = eventListeners.get(element);
if (handler) {
    element.removeEventListener('click', handler);
}
document.body.removeChild(element);
```

通过上述方法，可以确保在使用 removeChild 动态删除 DOM 元素后，尤其是在存在事件绑定等复杂情况下，被删除元素所占用的内存能被正确回收。

星途面试题库

面试题：JavaScript 动态删除 DOM 元素时的内存回收问题

知识考点

面试题答案