Question

我想知道如果在加载时分离div并在单击上附加相同的div会增加内存吗？分离div（填充图像）时div和图像信息是否保存在内存中？

例如：

<div class="divContain-one">
 <img src="test.png">
</div>

<div class="divContain-two"></div>

 var divContainingImage = $("#divContain-one").detach();

$("button").click(function(){
      $("#divContain-two").append(divContainingImage);
});

Answer 1

它不应该显着增加内存使用量。该变量在分离之前只包含对包含DOM元素的相同内存的引用，以及任何相关的jQuery数据。发生的一切都是DOM本身不再具有对该内存的引用。

当你追加它时，你也不会增加记忆力。它只是将同一个对象的引用添加到DOM中的新位置，它不会复制。

信息必须保存在内存中 - 当你追加时，它怎么知道添加到DOM的内容呢？

一个警告：调用$("#divContainingImage")的行为会创建一个包装DOM元素的jQuery对象，该变量包含对此对象的引用，而不仅仅是DOM元素。这确实会增加内存使用量，与.detach()的内容无关。

Answer 2

根据jquery documentaion 分离方法保留与已删除元素相关联的所有数据。

所以，是，尤其是你声明了一个变量并将 detach 方法返回的数据分配给它的事实 - 数据肯定存储在内存中。无论如何，请记住，如果我们不讨论数百或数千个元素，那么这种内存使用并不重要。

Answer 3

您还需要考虑是否有附加到DOM对象的事件侦听器。

如果从页面中删除一个对象，那么一旦没有对它的引用，最终就可以清理内存。

如果你删除a并且有一个点击监听器，那么它可以继续无限期地驻留在内存中。首先删除侦听器，然后删除DOM对象。这样就可以最终从内存中删除DOM对象。

分离div并附加它会增加内存吗？

3 个答案: