Heavy Javascript page gap of 15 seconds between response and page load

Question

I have a page (A) which is a heavy javascript page, when I leave this page to go to page B it takes a long time. When I go to page B from a different page it is really fast. So it has something to do with page A and probably its javascript.

When I run the network profiler from the developer tools in IE 9 it shows a gap of ~15 seconds between the response and the DomContentLoaded(event).

Page A is heavy with javascript because it runs the Xopus Editor, a rich text XML editor.

Does anybody have any ideas on what I could do to either analyse the gap as to what happens or what I could do to make Page A unload faster.

Answer 1

This is a long shot as there are about eleventy-hundred things wrong with it, but it might be somewhere to start. Add this script tag to your page as the very last one:

<script>
    function unloadJS() {
      var scripts = document.getElementsByTagName("SCRIPT");
      for (var index = 0; index < scripts.length - 1; index++)
      {
        var file = scripts[index].getAttribute("src");
        var start = +new Date();
        scripts[index].parentNode.replaceChild(document.createElement('script'),
                                               scripts[index]); 
        var elapsed = +new Date() - start;
        alert(file + ": " + elapsed.toString());
      }
      return false;
    }
</script>

This code attempts to force the unload of each of the JavaScript files that were loaded on the page, reporting the amount of time it takes to drop them in milliseconds. Fire this as is convenient, i.e., on unload or with a button:

<button onclick="return unloadJS()">Go!</button>

This might not work/tell you what you need to know because IE could refuse to do garbage collection when the script is disconnected. This could be because IE really doesn't unload them when you do this, or just because IE - well, what oddi said :)

In any event, this isn't a solution; it doesn't matter when the JS gets unloaded, garbage collection still takes the same amount of time. This is just an attempt at a first diagnosis, like you asked for. Hope it works/helps...

Answer 2

Yes IE sucks. But there are several tools to profile your page.

Fiddler or HttpWatch is a good tool for analysing your request timeline and see whether it takes long time to download all your heavy javascript code. It's often the main cause of slowing down a heavey js page. Since IE doesn't take parallel downloading js very well, it costs more time for hundreds of small javascript files.

For this case, try minifying your javascript. It is the most direct way to enhance your page load performance.

If it doesn't help much. You may need YSlow to analyse a detailed performance. Although it doesn't fits IE, fixing some issues under Chrome or FF can affect performance under IE.

Add some log in your console, narrow down the scope maybe you can find the execution performance problem.