Question

I have researched quite a bit about this but mostly by piecing other questions together, which still leaves some doubt. In an app that does not refresh the browser page at any time and may live for quite a while (hours) without closing (assuming that refreshing a page or navigating to another would restart the js code), what’s the best way to ensure objects are released and that there’s no memory leak.

These are the specific scenarios I’m concerned about:

All of the code below is within a revealing module pattern.

mycode = function(){}()

variables within functions, I’m sure this one is collected by the GC just fine

function(){ var h = "ss";}

variables within the module, should g = null when it’s no longer needed?

var g;
function(){ g = "dd";}

And lastly the life of a jqXHR: is it cleaned up after it returns? Should it be set to null in all cases as a precaution whether kept inside a function or module?

If doing this, is it x cleaned up by the GC after it returns?:

function(){
   var x = $.get();
   x.done = ...;
   x.fail = ...;
}

How about when doing this, will it also be cleaned up after x returns?:

var x;
function(){
   x = $.get();
   x.done = ...;
   x.fail = ...;
}

Lastly, is there a way to cleanup all variables and restart a module without restarting the browser?

Answer 1

variables within functions, I’m sure this one is collected by the GC just fine

Yes.

variables within the module, should g = null when it’s no longer needed?

Sure.

And lastly the life of a jqXHR: is it cleaned up after it returns? Should it be set to null in all cases as a precaution whether kept inside a function or module?

Various browsers have had bugs related to XHR that caused the onreadystatechange and anything it closed over to remain uncollectable unless the dev was careful to replace it with a dummy value (xhr.onreadystatechange = new Function('')) but I believe jQuery handles this for you.

Lastly, is there a way to cleanup all variables and restart a module without restarting the browser?

Global state associated with the page will take up browser memory until the page is evicted from the browser history stack. location.replace can help you here by letting you kill the current page and replace it with a new version of the same app without expanding the history stack.

Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won’t be able to use the Back button to navigate to it.

When you use the word “module”, that is not a term that has a well-defined meaning to the browser or its JavaScript interpreter so there is no way to evict a module and only a module from memory. There are several things that you have to worry about that might keep things in memory:

1. References to JavaScript objects that have been attached to DOM nodes and everything they close over — event handlers are a very common example.
2. Live setInterval and setTimeout callbacks and everything they close over.
3. Properties of the global object and everything they close over.
4. As you noted, properties of certain host objects like XHR instances, web worker callbacks, etc. and (you guessed it) everything they close over.

Any scheme that is going to unload a module and only a module would need to deal with all of these and figure out which of them are part of the module and which are not. That’s a lot of different kinds of cleanup.