Question

I’m suspecting that if i set div.innerHTML="" instead of using while(div.firstChild)div.removeChild(div.firstChild) the memory will be hogged until the page refreshes or the browser closes.

My question is how do we actully go about testing if my hypothesis is true?

Answer 1

Firstly, whether memory is returned to the system or not depends on the Javascript garbage collector (gc) and therefore results will vary from browser to browser.

It’s difficult to measure memory usage by looking at the process as there are several layers of memory management in place. To see how this can have an impact, consider that a huge javascript object might have been erased forever, but that memory might still not have yet been released back to the operating system because the web browser might keep hold of it in case you need to create more big objects. Another example is that most gc routines only run periodically, so it’s possible that object is still in memory but will be reclaimed later.

However, it’s pretty easy to determine if a particular operation is leaking memory as all you have to do is repeat it in an endless loop. e.g.

1. remove references to existing html elements
2. construct new html elements
3. add them to the page

Try this code:

var div = document.getElementById("test")

while(true) {

    // remove operation, change me
    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    // create some new content
    for(var i=0; i<1000; i++) {
        var p = document.createElement('p');
        p.appendChild(document.createTextNode('text'));
        div.appendChild(p);
    }
}

My results in Chrome, using the Task Manager (shift+esc):

1. Leaving the loop running endlessly without deleting anything eventually results in the “Aw! Snap” screen, which indicates memory has been exhausted
2. Using the removeChild technique leads to memory usage stabilizing at around 750MB
3. Using the innerHTML technique leads to memory usage stabilizing at around 750MB

If memory isn’t leaking you’ll notice a pattern similar to this: Increases to 300, drops to 150, increases to 400, drops to 250, eventually stabilising. This is the memory management system running out of memory, triggering the gc to reclaim memory that has been deallocated and increasing the available memory footprint each time until reaching a soft limit that has been set to avoid the process impacting others. This is a typical memory management scheme and more can be found by reading this wikipedia article: http://en.wikipedia.org/wiki/Garbage_collection_(computer_science)

Since both results stabilize, I’d conclude that (for Chrome at least) both techniques work the same though you might get different results from other browsers.

As there doesn’t seem to be a difference, removeChild should be preferred as innerHTML is not included in the W3C standard and is frowned upon by some developers. See more here: Alternative for innerHTML?

The reason innerHTML and removeChild have no differences is because underneath, they both have to de-reference elements to stop them from being visible on the screen. Memory leaks are most likely to occur when you have circular references (A points to B, B points to A, nobody else points to either) but this is only a problem in older browsers. This link has some good guidelines about how to avoid js memory leaks: Javascript memory management pitfalls?