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?
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?
Share Improve this question asked Dec 30, 2008 at 16:59 PistosPistos 23.8k14 gold badges66 silver badges78 bronze badges 3- For reference, I came across this blog post about the inaccuracy of the timer in browsers under Windows: ejohn.org/blog/accuracy-of-javascript-time – Pistos Commented Dec 30, 2008 at 17:11
- did you ever find the answer to your question, i'm curious myself. – android.nick Commented Sep 20, 2010 at 2:23
- android.nick: I used JSLitmus at that time. – Pistos Commented Sep 24, 2010 at 15:56
2 Answers
Reset to default 7JSLitmus looks like something I might try out.
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).