9

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?
});
maddrag0n
  • 459
  • 4
  • 13
  • 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* http://stackoverflow.com/questions/864516/what-is-javascript-garbage-collection – Joseph Feb 05 '12 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 Feb 05 '12 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 May 23 '13 at 14:25

4 Answers4

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.

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • so this applies to single-paged apps right? (doing everything in one page) let's say a programmer uses jQuery to find an element via class name. too much of those elements will cause overhead right? so it is somewhat necessary to remove elements that are not needed rather than merely hiding it from view. – Joseph Feb 06 '12 at 01:08
  • 1
    @Joseph - If you really don't need it any more in your page, then remove it. That is the best practice. – jfriend00 Feb 06 '12 at 01:29
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.

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.

alex
  • 479,566
  • 201
  • 878
  • 984
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.

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

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • I don't think you can say `it definitely releases the memory utilized by the elements`. The only way you can say that is if you **know** how the garbage collector works in every browser. Garbage collection is entirely up to the browser, all you can say it that it likely runs when the page is unloaded, and maybe from time to time when the page is still loaded. Various browsers have had memory leaks, in some cases memory was not released until the browser was restarted. – RobG Feb 06 '12 at 00:41
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.

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.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • thx. of course you are right w/ the referencing in the callback. included your remark in the original question to keep the focus on the main question of garbage collection. – maddrag0n Feb 05 '12 at 23:12