Question

In the following code:

$(document).ready(function() {
    var content = "";
    for (var i = 0; i < 1000; i++) {
        content += "<div>Testing...</div>";
    }
    $("#Load").click(function() {
        $("#MyDiv").empty();
        $("#MyDiv").append(content);
        return false;
    });
});

Load is a simple link and MyDiv is a simple div. In each major browser I tested this in, when I click on the link multiple times, I see the memory usage go up in Task Manager. In IE, it goes up slightly each time and stays up. In FF, it goes up each time, but once in a while comes down (I think this means that the memory is being reclaimed or garbage collected – a good sign). In Chrome, it goes up significantly each time and stays up.

First, is this code cleaning up the DOM correctly? If so, why does the memory usage increase with every click?

Note: I tried to make the example as simple as possible, but similar to the problem I am having in my app.

Answer 1

Wrap it around a div tag. It will help immensely and use native innerHTML (its faster).

$(document).ready(function() { 
    var content = ""; 
    for (var i = 0; i < 1000; i++) { 
        content += "<div>Testing...</div>"; 
    } 
    $("#Load").click(function() { 
        document.getElementById('MyDiv').innerHTML = ('<div>'+content+'</div>'); 
        return false; 
    }); 
});