管理动态加载页面中的javascript内存使用情况

Question

At the risk of being down-voted for bring to vague or asking an opinion I am unsure how to handle this situation properly, or if it even matters.

I am developing a single page web application where all pages except the main page (with the menu system) are loaded dynamically via ajax. All of the javascript libraries I use (jquery, bootstrap, kendo, and others) are loaded in the main page as well as my application.js and css files.

Each page I load requires it's own javascript and has a corresponding js files named the same as the html file (for my own sanity). When the page is downloaded and set in the content element, the page js runs, which is great.

I soon realized that the page js is adding any variables it creates to the global javascript space. Ideally upon the loading of a different page those variables would go away so javascript garbage collection could eventually reclaim that memory.

To facilitate this I started to re-use the same names for common structures, like kendo viewmodels so when a new page is loaded it replaces any global variables of the same name.

In some cases where there are specialized variables I set their values to null to release the memory in the global ajax loader function.

I'm considering adding a release() function to all pages that does this and call it before the page is unloaded. Since the release function is global and each page redefines it calling it prior to swapping out the page should work.

My questions:

1. does it matter? should I care about a few Kb of ram that may be left lying around..

2. Are there better ways of handling this?

3. Am what I'm now doing even effective? Does javascript garbage collection clean up un-referenced ram like I'm thinking it does?

Followup after Giacomo's answer:

Giacomo your technique works in the sense that the page functions normally and the kendo bindings have access to local viewmodel variable created in the Page routine. My concern is that I don't know how it is working. I omitted the var page = Page(); assignment and simply include Page(); at the end of the script (outside of the Page() function) and there seem to be no detrimental effects.

The way I see it is the script is run when the page is set into it's parent element's html (a div), this defines then runs the Page() function, which creates all the local variables and kendo widgets/bindings on the page, then it falls out of scope. Once the Page() function has completed, it ends and there should be nothing left, however the viewmodel I created does remain because the page and it's binding all work, click events defined in Page() are executed, and so on. So, when will all that stuff go away? Will it be de-allocated when I replace the parent's html with a new page? I don't see how...of course whatever kendo is doing to keep a reference to the viewmodel seems to keep it alive, I am not confident that it gets released when the page disappears, which is my whole intent.

It could be that the page = new Page(); is essential to the de-allocation process...but I don't know how to determine that.

Possible Solution?

Can someone comment on the worth of this:

//enters here on ajax page load after inserted into DOM
var pageData = {
    someData: 999,
    someArray: ["one","two"],
    functionOne: function(arg) {
        //stuff
    },
    functionTwo: function(arg) {
        //stuff
    }
};

//do some work
pageData.functionOne(pageData.someData);
pageData.functionTwo("abc");

//called before page is removed from DOM
function releasePage() {
    pageData = null;
}

//GC eventually cleans it up

Answer 1

you can put the js code of each page in a closure, like:

function Page() {
  var var1;
  var var2;

  function myFunc() {
    //...
  }
}

and then assign it to a variable upon the "page switching"

var page = new Page();

you can keep reassigning the same variable every time