I have a page in my application that refreshes some content (a list of users currently signed in) from the server every 10 seconds. This data is loaded using the Ajax class from the mootools framework, specifically with Javascript that looks like:
var xmldata = (function() { new Ajax('xmldata.jsp?time='+$time(), {method: 'get', onComplete: dataLoaded, autoCancel: true}).request(); }).periodical(10000); (which, every 10 seconds, creates an Ajax object and calls it’s request() method, which will invoke dataLoaded() method when complete).
If a user leaves their browser window open to this page for about 45-60 minutes, then attempting to navigate elsewhere will cause IE (v7 for sure, v6 as well I believe, Firefox or Chrome do not have this issue) to display the following popup:
Stop running this script?
A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive.
Now, it seems to me that this is likely caused by some sort of leak in the underlying script in the mootools framework – either too many Ajax.request() calls are queuing up to be called or some objects are not being properly cleaned up, even though the framework is supposed to have some garbage collection features in it.
What are the best ways to analyze what IE’s Javascript engine has done under the covers? Is there any possible way to determine if either of my hypothesis’ are correct?
I’ve seen that in a similar question, someone suggested using IBM Page Profiler to debug this issue. I’ve tried using Page Profiler and haven’t had much success – it seems to be useful if you are having a problem with the initial load of a page (to analyze what component is causing an excessive loading delay) but it does not seem to be able to analyze what goes on with Javascript running within a page after it has been completely loaded. I see in Page Profiler that the async calls to xmldata.jsp are requested every 10 seconds, but Page Profiler only shows that the server responds ok (in about 600 ms) but has no insight into how the parent page’s script uses this data.
In addition, in this post on the since-closed mootools discussion list, someone suggests removing code that registers an unload listener to call a garbage-collection method to resolve this issue – but that seems like resolving a symptom of the problem and not the problem itself.
This is probably a memory/resource leak in IE. The most common source of these are closures in your code or framework code. I always check the issue tracker for my javascript framework for reported bugs. Many times I have been saved by bug-reports & fixes from other users.
To try track the problem, you could try something like ie leak detector. There is an excellent msdn article that explains the theory of IE memory leaks too.
A rich source of leaks is event handlers, you really need to read the MSDN article to understand this. These often create leaks just of your type, so looking into unregistering any event handlers is probably a good idea.
I must admit that continious reloading every 10 seconds for an hour sounds fairly good; i’m not sure you should expect IE to get much better (maybe a bit on the low side, but still). You may need to adjust your expectations or at least set a target goal of runnning better on one single version of IE.
Re expectations: For a ‘general’ version of IE there are simply too many different versions with too many different bugs that you can target 100% stability for long-running applications on all of these versions. So at least initially I think it’s wise to choose a specific version as target.