PDA

View Full Version : IE 8 memory leak on page refresh



Notre
20 Oct 2014, 12:39 PM
I have a complicated Ext JS application, with a lot of custom JavaScript and CSS. I've discovered that if the user refreshes the page and then quickly refreshes the page a second time before the page has finished reloading, the memory (as reported by task manager) increases significantly when using IE 8. The same user behaviour doesn't reveal any memory increases in Chrome or Firefox, and only a minimal memory increase is noticed with IE 11. Unfortunately, the large majority of our customers insist on using IE 8. If I refresh the page slowly (i.e. start the refresh, wait for it to finish and then refresh again), a memory leak is not noticed.


I tried to research memory leaks on IE. One of the most prominent results is this page that enumerates multiple reasons for leaks:


http://msdn.microsoft.com/en-us/library/Bb250448.aspx


However, this article is quite dated and from what I can understand, with IE 8 memory leaks caused by closures that have references to DOM elements should no longer be a problem. I also ran the sample for cross page leaks, but wasn't able to reproduce a problem in IE 8.






Given that this memory leak is only observed when the user quickly refreshes the browser page (and is fine if I refresh slowly), I made the guess that perhaps some references (e.g. to dom elements) is getting setup during page load, but perhaps the page unload logic is not getting fired (to clean up the references). I added some console logging statements for window load and window unload events and repeated the experiment. While the number of log statements I saw was less than the number of times I rapidly refreshed the page, I always saw a matching number of load/unload log statements. This makes me conclude that I'm not introducing some script that doesn't get a chance to unload.


We also have a lot of state that is preserved by a state provider. I disabled the state provider (so nothing is saved upon page refresh), but the same memory increase problem is seen upon fast page refresh.


The web application is not public (it is ip restricted) so I can't share the code with others to test. So, all I'm looking for in terms of help is suggestions of patterns of coding that might introduce memory leaks in IE 8 (and perhaps some types of leaks that have been fixed after IE 8, since the problem is not nearly so obvious in IE 11).






Thank you

slemmon
22 Oct 2014, 8:34 PM
I would recommend first checking out this guide:
http://docs.sencha.com/extjs/5.0/core_concepts/memory_management.html

Notre
24 Oct 2014, 12:08 PM
That's a fantastic article. Thank you for sharing it. I have one question about keeping references in closures. I understand why the bind approach is better. My question is, using either bind or the original code (which cast a wider net in its closure to include o), as long as runAsync is executing, it will still a hold a reference to x, but once runAsync has finished, then it will release the closure, and the memory used by x (and possibly o) will eventually be reclaimed, right?