Severe Javascript page break in 15 seconds between response and page loading

Question

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

When I start the network profiler from the developer tools in IE 9, it shows a 15 second gap between the response and the DomContentLoaded (event).

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

Does anyone have any ideas on what I can do to analyze the difference in what is happening or what I can do to make the page faster.

Answer 1

This is a long shot, as there is something at least nine hundred in it, but it can be somewhere to start. Add this script tag to your page as the last:

<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 download of each of the JavaScript files that have been loaded onto the page, reporting the amount of time it takes to delete them in milliseconds. Fire is how convenient, i.e. When unloading or using the button:

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

This may not work / tell you what you need to know, because IE may refuse to collect garbage when the script is disabled. This may be due to IE not really unloading them when you do this, or simply because IE is - well, what oddi said :)

In any case, this is not a solution; it doesn't matter when JS is unloaded, garbage collection still takes the same amount of time. This is just an attempt at the first diagnosis, as you requested. 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 to analyze the request timeline and see if it takes a long time to load all your heavy javascript code. This is often the main reason for slowing down a heavy js page. Since IE does not take parallel loading of js very well , it costs more time for hundreds of small javascript files.

In this case, try reducing your javascript . This is the most direct way to improve page loading performance.

If this does not help. You may need YSlow to analyze detailed performance. Although this does not match IE, fixing some issues in Chrome or FF may affect performance in IE.

Add some log to the console, narrowing the scope, perhaps you may find a performance issue.

Answer 3

Perhaps you are using a Javascript library such as PrototypeJS that captures the unload page unload , and when the page is unloaded, it goes through the array, removing all event listeners for all the DOM elements on the page. If we know which libraries you use, we could simulate a call to unload a page, to force the library to unload it. Then start the timer to see how long it takes to load another page.