jquery中DOM元素的手动垃圾收集是否会提高浏览器性能?

时间:2021-11-30 05:34:50

with scope on performance, does it make any sense to remove elements that are not longer needed? or do browsers perform auto garbage collection on dom elements, that are not further referenced in code?

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

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

4 个解决方案

#1


8  

This code:

这段代码:

$('some_element').remove();

tells the browser that you are done with that element and no longer need it in the DOM. If you don't have any other references in your javascript to that element, the garbage collector will then free the memory that it uses.

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

If you do not remove it, then the DOM element stays in your web page for as long as that web page is displayed. It will never be garbage collected because the browser has no way of knowing whether you intend for it to stay in the page or not.

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

It is a good practice to manually remove DOM elements that are no longer needed.

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

But, in 99% of the cases, it will not matter in any way because the memory used by one DOM element is trivial compared to the overall memory used by a web page. Everything in the web page will be freed when the user goes to another web page anyway.

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

The main time that it does make a significant difference to free something like this is when you are doing the same operation over and over again (in a big loop, on a timer, etc...). In that case, you do not want objects to pile up and consume increasing amounts of memory as the page is used.

它确实在这个问题上发挥重大作用的主要时间是你一遍又一遍地做同样的操作(在一个大循环,一个计时器等......)。在这种情况下,您不希望对象堆积起来并在使用页面时消耗越来越多的内存。

#2


4  

Yes, it makes sense.

是的,这是有道理的。

GC should only kick in when there are no references to the DOM element. Whilst it is still a part of the DOM (display: none doesn't actually remove it), it will consume memory, from the DOM portion to event handlers, etc.

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

If your intention is to fade out the element and remove the element (possibly no longer needed or removal of DOM clutter), then use the code in your example.

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

#3


2  

fadeOut does not remove the element. All it does is, funnily enough, fade it out. It does an animation that reduces the opacity style to 0. The browser doesn't display the element, but it is still present in memory. So yes, doing remove will probably save a little memory, because unattached, unreferenced DOM elements will be cleaned up with garbage collection.

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

With that said, you probably don't need to bother, unless you have very large numbers of elements on the page, or if you have a page that will be open a long time without a page reload (e.g. an AJAXy webapp).

话虽如此,您可能不需要打扰,除非您在页面上有非常多的元素,或者如果您有一个页面将长时间打开而没有页面重新加载(例如AJAXy webapp)。

As always, don't go to lots of effort to optimise until you actually need to.

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


Note also that if you really, really want to optimise, you can also do this within the callback:

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

$(this).remove();

Constructing the jQuery object with a DOM element rather than a selector string is many times faster.

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

#4


2  

Yes, it does makes sense because remove method takes care of removing all the events attached on the element and it definitely releases the memory utilized by the elements.

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

However browser takes care of releasing unused resources one it is out of scope like you navigate to another page or refresh the page.

但是,浏览器负责释放未使用的资源,就像您导航到另一个页面或刷新页面一样。

#1


8  

This code:

这段代码:

$('some_element').remove();

tells the browser that you are done with that element and no longer need it in the DOM. If you don't have any other references in your javascript to that element, the garbage collector will then free the memory that it uses.

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

If you do not remove it, then the DOM element stays in your web page for as long as that web page is displayed. It will never be garbage collected because the browser has no way of knowing whether you intend for it to stay in the page or not.

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

It is a good practice to manually remove DOM elements that are no longer needed.

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

But, in 99% of the cases, it will not matter in any way because the memory used by one DOM element is trivial compared to the overall memory used by a web page. Everything in the web page will be freed when the user goes to another web page anyway.

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

The main time that it does make a significant difference to free something like this is when you are doing the same operation over and over again (in a big loop, on a timer, etc...). In that case, you do not want objects to pile up and consume increasing amounts of memory as the page is used.

它确实在这个问题上发挥重大作用的主要时间是你一遍又一遍地做同样的操作(在一个大循环,一个计时器等......)。在这种情况下,您不希望对象堆积起来并在使用页面时消耗越来越多的内存。

#2


4  

Yes, it makes sense.

是的,这是有道理的。

GC should only kick in when there are no references to the DOM element. Whilst it is still a part of the DOM (display: none doesn't actually remove it), it will consume memory, from the DOM portion to event handlers, etc.

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

If your intention is to fade out the element and remove the element (possibly no longer needed or removal of DOM clutter), then use the code in your example.

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

#3


2  

fadeOut does not remove the element. All it does is, funnily enough, fade it out. It does an animation that reduces the opacity style to 0. The browser doesn't display the element, but it is still present in memory. So yes, doing remove will probably save a little memory, because unattached, unreferenced DOM elements will be cleaned up with garbage collection.

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

With that said, you probably don't need to bother, unless you have very large numbers of elements on the page, or if you have a page that will be open a long time without a page reload (e.g. an AJAXy webapp).

话虽如此,您可能不需要打扰,除非您在页面上有非常多的元素,或者如果您有一个页面将长时间打开而没有页面重新加载(例如AJAXy webapp)。

As always, don't go to lots of effort to optimise until you actually need to.

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


Note also that if you really, really want to optimise, you can also do this within the callback:

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

$(this).remove();

Constructing the jQuery object with a DOM element rather than a selector string is many times faster.

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

#4


2  

Yes, it does makes sense because remove method takes care of removing all the events attached on the element and it definitely releases the memory utilized by the elements.

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

However browser takes care of releasing unused resources one it is out of scope like you navigate to another page or refresh the page.

但是,浏览器负责释放未使用的资源,就像您导航到另一个页面或刷新页面一样。