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.

E.g.

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. E.g.:

document.ready time: 653ms

Answer 1

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!