Javascript (jQuery) performance measurement and best practices (not load time)

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?

Answers:

Answer

JSLitmus looks like something I might try out.

Answer

By using Firebug you can go into console tab, then click the firebug-icon in the upper left corner (called "Firebug options"). Then click on the option "Profile Javascript", after that just do what you want to measure, for example clicking on a javascript button, draging a Jquery dragable object or what ever you want that runs a bit of javascript code. When you have executed the javascript you want to measure go back to the same menu option and once again click "Profile javascript" (so that it gets unchecked). Now the console tab will be filled up with all the actions you previously ran aswell as the time it took to execute each method etc (and total time aswell).

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.