如何避免被移除的DOM节点遭闭包等无效强引用无法回收？

问题背景 #

尝试实现弱事件模式解决DOM节点移除后因强引用无法被垃圾回收的问题，先看存在内存泄漏风险的时钟组件示例：

原时钟组件代码 #

<div id="clock">
  <button>Remove</button>
  <p></p>
</div>

{
  const clockElem = document.getElementById('clock');

  const timefmt = new Intl.DateTimeFormat(
    'default', { timeStyle: 'medium', });

  setInterval(() => {
    const d = new Date;
    console.log('tick', d, clockElem);
    clockElem.querySelector('p').innerHTML =
      timefmt.format(d);
  }, 1000);

  clockElem.querySelector('button')
    .addEventListener('click', ev => {
      clockElem.remove();
    });
}

点击移除按钮后，setInterval回调仍会持续执行——因为闭包强引用了clockElem，导致DOM节点无法被垃圾回收；按钮的事件处理函数还存在循环引用（DOM节点引用事件处理函数，函数又引用DOM节点），虽然部分引擎的循环引用收集器可能处理，但行为不确定。

尝试的解决方案 #

为避免强引用，实现了weakCapture函数让闭包通过弱引用持有DOM节点，并结合FinalizationRegistry清理定时器：

改进后的代码 #

<div id="clock">
  <button>Remove</button>
  <p></p>
</div>
<button onclick="+'9'.repeat(1e9)">Try to force GC</button>

const weakCapture = (captures, func) => {
  captures = captures.map(o => new WeakRef(o));
  return (...args) => {
    const objs = [];
    for (const wr of captures) {
      const o = wr.deref();
      if (o === void 0)
        return;
      objs.push(o);
    }
    return func(objs, ...args);
  }
};

const finregTimer = new FinalizationRegistry(
  timerId => clearInterval(timerId));

{
  let clockElem = document.getElementById('clock');

  const timefmt = new Intl.DateTimeFormat(
    'default', { timeStyle: 'medium', });

  const timerId = setInterval(
    weakCapture([clockElem], ([clockElem]) => {
      const d = new Date;
      console.log('tick', d);
      clockElem.querySelector('p').innerHTML =
        timefmt.format(d);
    }), 1000);
  
  finregTimer.register(clockElem, timerId);

  clockElem.querySelector('button')
    .addEventListener('click',
      weakCapture([clockElem], ([clockElem], ev) => {
        clockElem.remove();
      }));

  clockElem = null;

  // now clockElem should be held strongly only by the DOM
}

遇到的问题 #

移除clockElem后，控制台仍持续输出'tick'日志，说明WeakRef未失效，DOM节点仍被强引用。即使触发GC，问题依然存在，Chromium和Firefox浏览器均出现此情况。

问题原因 #

你遗漏了DOM节点间的双向强引用+事件监听器的强引用链：

1. DOM节点的父子关系是双向强引用：子节点的parentNode指向父节点，父节点的childNodes包含子节点。按钮元素作为clockElem的子节点，会强引用clockElem。
2. 按钮元素绑定了事件监听器，浏览器的事件系统会强引用该监听器的回调函数，进而强引用按钮元素本身。
3. 最终形成强引用链：事件监听器注册表 → 按钮元素 → clockElem，导致clockElem始终无法被垃圾回收，WeakRef自然不会失效，定时器也不会被清理。

修复方案 #

需要打破强引用链，以下是两种可行方式：

方式1：移除节点时手动清理事件监听器 #

保存事件回调的引用，在移除节点前手动解绑：

{
  let clockElem = document.getElementById('clock');
  const timefmt = new Intl.DateTimeFormat('default', { timeStyle: 'medium' });

  // 保存定时器回调引用
  const timerCallback = weakCapture([clockElem], ([clockElem]) => {
    const d = new Date;
    console.log('tick', d);
    clockElem.querySelector('p').innerHTML = timefmt.format(d);
  });
  const timerId = setInterval(timerCallback, 1000);
  finregTimer.register(clockElem, timerId);

  // 保存按钮点击回调引用
  const clickCallback = weakCapture([clockElem], ([clockElem], ev) => {
    // 先移除按钮的事件监听器
    ev.target.removeEventListener('click', clickCallback);
    clearInterval(timerId); // 手动清理定时器，兜底用FinalizationRegistry
    clockElem.remove();
  });
  clockElem.querySelector('button').addEventListener('click', clickCallback);

  clockElem = null;
}

方式2：用AbortController管理事件监听器 #

现代浏览器支持AbortController批量取消事件监听器，无需手动保存回调：

{
  let clockElem = document.getElementById('clock');
  const timefmt = new Intl.DateTimeFormat('default', { timeStyle: 'medium' });

  const timerCallback = weakCapture([clockElem], ([clockElem]) => {
    const d = new Date;
    console.log('tick', d);
    clockElem.querySelector('p').innerHTML = timefmt.format(d);
  });
  const timerId = setInterval(timerCallback, 1000);
  finregTimer.register(clockElem, timerId);

  const abortController = new AbortController();
  clockElem.querySelector('button').addEventListener('click', 
    weakCapture([clockElem, abortController], ([clockElem, abortController], ev) => {
      abortController.abort(); // 取消所有绑定此控制器的事件监听器
      clearInterval(timerId); // 手动清理定时器
      clockElem.remove();
    }),
    { signal: abortController.signal } // 绑定控制器信号
  );

  clockElem = null;
}

补充说明：FinalizationRegistry的回调执行时机不确定，即使DOM节点被回收，也可能不会立即触发定时器清理。建议在移除节点时手动清理资源，用FinalizationRegistry作为兜底机制。

内容的提问来源于stack exchange，提问作者dumbass