销毁 DOM 元素时如何处理内存？

【问题标题】：How is memory handled when destroying DOM elements?销毁 DOM 元素时如何处理内存？
【发布时间】：2020-02-14 09:49:30
【问题描述】：

如果我在许多动态创建的元素上都有click 事件侦听器，当remove() 被removeEventListner 调用时它们会使用内存吗？

假设我有一些这样的代码：

for (var i = 0; i < 9999; i++) {
  var $btn = $('<button class="my_button">');
  $('body').append($btn);
  $btn.click(function(){ /* ... */ })
}

$('.my_button').remove();

事件处理程序是否仍会使用内存？如果我想确保没有内存泄漏风险，是否必须致电removeEventListner？

【问题讨论】：

标签： javascript jquery performance memory-management

【解决方案1】：

该元素持有的内存将在它从 DOM 中移除并销毁时被释放。这是由浏览器处理的，因此虽然理论上不应该有任何内存泄漏，但您仍受垃圾收集器的支配。

话虽如此，您可以在此处使用更好的方法。在所有按钮的父元素上创建 single 委托事件处理程序。然后，您就有了一个适用于所有按钮元素的事件处理程序实例。这将节省内存，并且意味着您在从 DOM 中删除元素时无需担心任何垃圾收集的细节。试试这个：

$('#buttonContainer').on('click', '.my_button', function() {
  // button click action here...
});

【讨论】：