I'll say right off the bat that this question is NOT about load times; I know about YSlow, the Firebug profiler, and whatever best practices and tools googlage reveals about page component load times.
I am asking what good profiling tools or libraries or add-ons there are for measuring actual execution of Javascript (specifically jQuery), insofar as improving actual user experience goes. For example, measuring the time from click to visible result on-screen, or helping to determine why a jQuery-based hover effect has slow responsiveness.
We are noticing that when the page/DOM grows relatively large (say, 70kb to 150kb worth of HTML, excluding external CSS, JS and images), and/or has very deep nesting (14-25 levels from <body> to deepest tag), jQuery events fire more slowly, or the whole JS user experience gets sluggish.
I also have googled and learned about best practices for selectors (e.g. selecting by id is much faster than selecting with classes), I will be implementing these practices. However, once all jQuery is fully loaded, and all events hooked, we still need to improve the actual event firing and execution.
I have implemented some event delegation already, and I do get the sense that having fewer hooked DOM elements makes things slightly better, but the overall experience still needs improvement with large pages. I should mention that, since the site is AJAX heavy (lots is loaded via AJAX as opposed to initial HTTP hit), we are making heavy use of livequery instead of the plain jQuery event hooks. I should also mention that we are slightly more focused on IE(7+) performance, but also require good Firefox performance.
As I develop and make changes, I figure I need a way to measure speeds pre- and post-change, so I can have concrete numbers on whether or not a change improves anything.
Any tips, tools, libs, blog posts, URLs?