jQuery profiling - measure complete onReady runtime

Question

Hi,

I'd like to measure how long it takes to run the whole $().ready() scope in each of page.

For profiling specific functions I just set a new Date() variable at the beginning of the relevant part and then check how long it takes to get to the end of the relevant part.

The problem with measuring the whole $().ready scope is that it can sometimes run some of the code asynchronously and then I can not wait for it all to finish and see how long it has taken.

Is there any event which is fired once the page has completely finished running all $().ready code?

EDIT: Using Firebug or other client debuggers are not an option since I also need to collect this profiling information from website users for monitoring and graphing our web site's page load speeds

Thanks!

Answer 1

Have you tried using Profiler in Firebug?

Answer 2

Swap out the jQuery ready function with a function that does your start and finish tracking, and calls the original method.

jQuery.ready = (function() {
    var original = jQuery.ready;
    return function() {
     alert('starting profiler');
     original();
     alert('ending profiler');
    };
})();

$(function() {
    alert('this message will appear between the profiler messages above...');
});

Answer 3

There will be no event fired because its virtually impossible for ready() to know when any asynchronous functions are done processing. Thus, you'll need to bake this functionality in yourself; you could use jQuery's custom events, or perhaps set a function to run on setInterval() that can introspect the environment and deduce whether or not everything else is done.