Yesterday I was profiling a page that used jQuery. The page took a long time to initialize. Firebug Profile (a great tool) told me that the time was in jQuery, but that wasn’t much help — the page initialization code had a lot of calls to jQuery, to bind functions to various page elements, and most of them were harmless.
Hence, jQuery.profile. Stick this in your page, call $.profile.start() to start profiling calls to $(selector), and then $.profile.done() to stop profiling and print out something like this:
Selector Count Total Avg+/-stddev script, script, scri… 100 101ms 1.01ms+/-1.01 script 200 58ms 0.29ms+/-0.53 html body #output 100 55ms 0.55ms+/-0.74 script, #output 100 54ms 0.54ms+/-0.73 #output 100 6ms 0.06ms+/-0.24
Or just include ?jquery.profile.start query parameter in your page URL to begin profiling automatically as soon as the plugin is loaded.
The repository is on GitHub, so you can can comment here or fork it from there if you’ve got something to say.
Comments
My initialisation code (essentially setting up various event handlers in jQuery) was taking far too long. After profiling my code (manually, not using the plugin you mentioned) it occurred to me that I was being too lazy with some of my selectors. So replacing ...
// Slow.
$('.class').click(somefunction);
... with ....
// Speedy. JQuery probably uses getElementsByTagName to speed up.
$('div.class').click(somefunction);
... made a drastic improvement in performance.