Menu
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?
320
Complex code or longer code may be easier to understand and execute if it is written in jQuery as in the case of longer code there can be many mistakes in JavaScript. jQuery is faster to use and to code.
JQuery, however, is already a multi-browser library. Code Length – JavaScript requires significantly more lines of code than JQuery. Speed – While JavaScript is faster in accessing the Document Object Model (DOM), JQuery is much faster when it comes to complex, browser-end developments.
stop() The window. stop() stops further resource loading in the current browsing context, equivalent to the stop button in the browser.
JSLitmus looks like something I might try out.
138
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).
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
