Measure CPU load of Javascript applications

Question

I need to measure the performance overhead of additional Javascript event bindings (using jQuery live), the overhead would probably increase CPU load and be very hard to notice from execution time profiling.

How can I measure the CPU load differences between two different versions of a Javascript application?

Answer 1

Another option for analysis is dynaTrace Ajax edition. Resig has a quick overview of it here. It's specific to IE (but...that's the one with the worst performance in most cases so...)

Take a look, all the suggestions here are great, if you're looking at IE issues (some intranet apps are locked down to it) then dynaTrace is an excellent and still free tool.

Answer 2

The Chrome dev tools are great, but since Chrome is not a browser you ever have to worry about as far as JS performance, and it optimizes things a lot, it doesn't help much with finding bottlenecks of other browsers. IE 8 has dev tools that let you profile, so you might find that useful, besides the usual Firebug profiler.

But regarding your situation, let me say that just binding an event doesn't result in much CPU load, more of a memory issue, but you shouldn't have to worry unless you're doing something out of the ordinary on your page.

Also if you're concerned in particular about the jQuery.live function, let me quickly explain how it works: Let's say you do $('#linksWrap a').live('click', fn);

• This creates one, and only one event handler, and attaches it to #linkswrap.
• When you click on one of the links, the click event bubbles up the DOM tree, eventually reaching #linkswrap.
• jQuery.live detects from which link it actually came from. This info is in the browser Event object.
• jQuery.live applies the fn within the context of the link that was clicked

So as you see, it's actually pretty efficient. The browser only attaches one event, so memory usage is low, and it also doesn't need to constantly check for new elements, it uses event bubbling in a cool way.

In fact one might argue, that if you are attaching thousands of events to a page, the .live method might be more efficient, assuming you're using good selectors. (e.g. .something .foo .bar.baz requires a lot of traversal and bubbling, but #parentOfTheLinks a.links will be quick)