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?

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

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?

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

• javascript
• jquery
• ajax
• dom
• browser

• 1 The main purpose of garbage collection is to allow the programmer not to worry about memory management of the objects they create and use stackoverflow.com/questions/864516/… – Joseph Commented Feb 5, 2012 at 22:51
• I agree, but garbage collection is usually more efficient on strict syntax languages like objective-c and less effective on the more easy-going languages. – maddrag0n Commented Feb 5, 2012 at 23:09
• with ahead of time compilation of javascript seems to get more and more popular… will ahead of time compilation have any impact on the answers to this question? – maddrag0n Commented May 23, 2013 at 14:25

4 Answers 4

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.

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.

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

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.

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.

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.

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.

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.

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).

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.

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.

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