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

Question

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

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

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

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

事件处理程序仍会使用内存吗？如果我想确保不存在内存泄漏风险，是否必须调用 removeEventListner？

Answer 1

当该元素从 DOM 中删除并销毁时，该元素所持有的内存将被释放。这是由浏览器处理的，因此尽管理论上不应该有任何内存泄漏，但您却受到垃圾收集器的摆布。

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

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