Memory size increase in every navigation of jQuery ajax call

Question

Initially the application size is 42 MB, but it is increased gradually from '0.5 to 1' MB for each navigation. After some-while the memory will not be released to its initial stage. It is retained in 68 MB (the GC is not released the memory).

 

- We have investigated with Google developer tool (F12 - Memory): the 'Detached DOM control' (of the previous navigation) are not released. Also there is no circular references (It is confirmed with two Snapshots).

 

- The recent changes are,

 

- We supported the 'Ajax call' instead of 'form submit' for the performance.

 

- We have replaced the 'BODY' content entirely by using the $('body').html(bodyContent); (we have used the initially loaded javascript & CSS, we just replace the body content).

 

- Our assumption is 'the jQuery internal cache, is not cleared the detached DOM elements'. So we have tried before the ajax call

 

- in Ajax call - options, we set 'false to cache'

 

- $.expr.cacheLength = 1 (As per -> http://stackoverflow.com/questions/17279143/jquery-sizzle-checkcontext-memory-leak)

 

- we force to delete all cache, like

 

for(var x in $.cache)

{

delete $.cache[x];

}

 

After the ajax call:

 

- set null to all global variables.

- before replacing the html(): force to delete all event listeners and 'register the events again' after the html() replacing.

- we also tried '$('body').empty() and $('body').detach()'

 

But we could not release detached DOM elements.

 

How do we release the Detached DOM elements? please suggest for this case.