javascript memory leak

Question

i've just noticed that some javascript i;ve just written appears to be leaking memory, it quite a simple piece of code - thanks to jquery - but I can watch it running in taskmanager and the memory usage is slowly clicking up by between 4 and 40 bytes.

All i'm doing is throwing some data at a asp mvc controller/action via getJSON:

$(document).ready(function () {
    var olddata = "";
    window.setInterval(function () {
        var options = JSON.stringify({
            orderby: "name"
        });
        var params = {
            options: options,
            data: olddata ? JSON.stringify(olddata) : ""
        };
        $.getJSON("/Home/GetTasks", params, function (json) {
            olddata = json;
            json = null;
        });
        params = null;
        options = null;
    }, 1000);
});

I've bumped up the timer value just to see the problem more readily. I'm obviously doing something wrong here butcan't see what.

Should I be cleaning up the getJSON call?

TIA.

Answer 1

How do you know you're actually leaking memory?

At small numbers like 4 and 40 bytes, you could just be seeing heap growth, but some of the new blocks in the heap are "free" and available for future use so while the overall app memory use grows, the memory isn't actually leaking and will be available for future use so it won't grow forever.

If this is the entire extent of your experiment, then I don't see any issues with the code.

There are three function closures here. The $(document).ready() closure lasts the lifetime of your code, but it's just a one-time deal so there should be no issue.

The anonymous function passed to setInterval() keeps the $(document).ready() closure alive. Each call to the setInterval() anonymous function should be a new call that will get a new set of local variables and release it's old ones when the prior calls runs to completion.

The anonymous function passed to getJSON() creates a closure on the setInterval anonymous function, but that closure should only last until the getJSON function finishes and when it does the setInterval() anonymous function closure should be released.

The only closure that I see that lasts here is the $(document).ready() closure which is something you intend and it's only created once so it should cause no leak.

All the local variables in the getJSON anonymous function are going to be released when the it finishes. The only data from the getJSON call that survives is your assignment of:

olddata = json;

But, each successive assignment is just replacing the data from the previous call so the previous data is no longer referenced and available for recycling by the garbage collector.

There are no DOM manipulations here so there is no opportunity for cross or circular references between DOM and JS.

My conclusion is that I don't see anything that will leak. I see plenty of things using temporary memory so I suspect what you're seeing in the process memory usage is just heap growth, but growth in a way that the memory that has grown will eventually get reused. If the browser is also caching the JSON results, you could be seeing memory cache growth too.

Unfortunately, in today's browsers, it's difficult to tell when it's really a memory leak versus a temporary expansion of browser memory used by caching, general heaps, etc... In the extreme, you could set all caches to be very small and run this for a long time (hundreds of thousands of iterations). If it's not a leak, memory use should eventually flatten out. If it is a leak, memory usage should continue to grow relatively linearly.

Disclaimer: the one disclaimer here is that I'm assuming that the jQuery function $.getJSON() doesn't leak itself and always finishes in a way that cleans up the closure it creates, even if the ajax call is not successful.