动态添加和删除 DOM 元素是否会造成内存泄漏？

Question

我正在向 DOM 添加 div 并在其上执行一些动画。动画结束后，我再次从 DOM 中删除 div，如下所示：

$div = $("<div />", {id:"flashMsg", class: className, html:msg}).prependTo(bazingaApp.app.rightPanel);

$div.fadeIn("slow",function(){
   $(this).delay(5000).slideUp(1000, function () {
       $(this).remove();                    
   });
});

这会造成任何内存泄漏吗？

Answer 1

如果 $div 是超出范围的变量，则不会。如果 $div 变量保存在内存中，它就会执行。如果只有一个 $div 变量，那将是一个 非常非常小的 泄漏。如果 $div 被重复创建和保存（例如，在一个被闭包捕获的函数中），这个微小的泄漏将会累积起来。很可能，它很好，但我们需要更多的上下文才能确定。

为避免这种可能性，您可以完全删除该变量：

$("<div />", {
    id:"flashMsg",
    class: className,
    html:msg
})
.prependTo(bazingaApp.app.rightPanel)
.fadeIn("slow",function(){
   $(this).delay(5000).slideUp(1000, function () {
       $(this).remove();                    
   });
});

动态添加和删除 DOM 元素是否会造成内存泄漏？

Will adding and removing a DOM element dynamically create memory leaks?

jquery

memory-leaks

dom-manipulation