multiple document.ready()'s performance metrics

Question

I have several javascript files that during run-time get combined and minified. This is for an enterprise application with 10+ developers. There are document.ready functions all over the place causing 5+ second javascript load. I'd like more help in figuring out where the bottlenecks are by slowly removing pieces of functionality.

Eg

file1.js

$(document).ready(function() {
  // 100s of lines of code
});

file2.js

// 100s of lines...
$(document).ready(function() {

  // 100s of lines of code

});
// 100s of lines...

I'd like to include some kind of metrics so I can slowly comment different functions and see what is actually making a difference. Essentially I need a way to monitor the overall time it takes for document.ready to run.

I'm thinking maybe I can use jQuery to accomplish this. Maybe change all the $(document).ready's in my project to use the jquery wrapper and then put a timer around that. Alternatively I could run a function as the very first script (before the combined/minfied file is included) to start a timer. I'm just not sure when that timer could stop and display. Any ideas?

Edit: I know firebug can achieve this but I'm working on a huge enterprise application and firebug is unfortunately not an option for me at this time. I'm really hoping just to attach a number to the HTML. Eg:

document.ready time: 653ms

Answer 1

I think the first thing you should do is fire up Firebug or Safari profiler and see what's actually taking all the time.

After this, using Page-Speed and YSlow can help you find more about the load speed bottlenecks.

Just having more than one listener on document.ready should not really slow things down - it's lilkely either the code that runs on those listeners, or the amount of code you are loading.

Answer 2

Thanks to blesh, this is the solution I was looking for:

edit the production jQuery-1.3.2 and surround the jQuery.ready() call with this:

var startTime = new Date(); 
jQuery.ready(); 
var endTime = new Date(); 
var difference = endTime - startTime; 
alert("document.ready time: " + difference + " milliseconds"); 

The jQuery.ready() is line 3066 for IE.

And of course the alert can be replaced with something that outputs right to the screen, depending on your layout.

Thanks blesh!

Answer 3

It's not the number of $(document).ready(fn) calls that is getting you... if you take a look at the inner workings of jQuery, it's not doing anything fancy. It's simply putting all of the functions you pass in into an array and then executing each one when jQuery.ready() is called once the DOM is loaded.

If I were you, I'd take a look at a few things:

1. How big is your html output? Are there tons of nested elements? That could slow the DOM loading.
2. Are you doing a lot of ajax calls at the outset of your page load that you have to wait for before your scripts can complete?
3. Are you using really inefficient selectors with jQuery? there are quite a few posts about that around here.

Hopefully that helps.

Answer 4

If you're stuck on IE6, dynaTrace Ajax could be worth looking in to. It should allow to inspect and profile the scripts in ways similar to what you do in Firebug's profiler. This would save you the code changes...

Unfortunately I have no personal experience with it (yet), but others have (see the testimonials for links. Sorry, but I don't have enough rep. to post the links here).