在jquery中手动垃圾收集DOM元素会提高浏览器性能吗？

Question

在性能范围上，删除不再需要的元素是否有意义？ 或浏览器是否在dom元素上执行自动垃圾收集，代码中没有进一步引用？

$('some_element').fadeOut(1000, function(el){
   $(el).remove(); // <-- does this make sense at all?
});

Answer 1

这段代码：

$('some_element').remove();

告诉浏览器你已完成该元素，并且不再需要它在DOM中。 如果你的javascript中没有任何其他引用到该元素，垃圾收集器将释放它使用的内存。

如果不删除它，那么只要显示该网页，DOM元素就会保留在您的网页中。 它永远不会被垃圾收集，因为浏览器无法知道您是否打算将它留在页面中。

手动删除不再需要的DOM元素是一种很好的做法。

但是，在99％的情况下，它无论以何种方式都无关紧要，因为与网页使用的整体内存相比，一个DOM元素使用的内存是微不足道的。 无论如何，当用户转到另一个网页时，网页中的所有内容都将被释放。

这个主要时间对于释放这样的东西有很大的不同，那就是当你一遍又一遍地做同样的操作时（在一个大循环，一个计时器等......）。 在这种情况下，您不希望对象堆积起来并在使用页面时消耗越来越多的内存。

Answer 2

是的，这是有道理的。

只有在没有DOM元素的引用时才应该启动GC。 虽然它仍然是DOM的一部分（ display: none实际上没有删除它），但它将消耗内存，从DOM部分到事件处理程序等。

如果您打算淡出元素并删除元素（可能不再需要或删除DOM混乱），那么请使用示例中的代码。

Answer 3

是的，它确实有意义，因为remove方法负责删除元素上附加的所有事件，它肯定会释放元素使用的内存。

但是，浏览器负责释放未使用的资源，因为它导航到另一个页面或刷新页面。

Answer 4

fadeOut 不会删除元素。 它所做的只是，有趣的是，淡出它。 它执行一个动画，将opacity样式减少到0 。 浏览器不显示该元素，但它仍然存在于内存中。 所以，是的，做remove可能会节省一点内存，因为未婚，未引用的DOM元素将与垃圾收集清理。

话虽如此，您可能不需要打扰，除非您在页面上有非常多的元素，或者如果您有一个页面将在没有页面重新加载的情况下打开很长时间（例如，AJAXy webapp）。

与往常一样，在您真正需要之前，不要花费很多精力进行优化。

---

另请注意，如果您确实想要优化，还可以在回调中执行此操作：

$(this).remove();

使用DOM元素而不是选择器字符串构造jQuery对象要快很多倍。