CODEWITHSUNDEEP
javascriptjqueryperformance
grateful.dev
grateful.dev

Reputation: 1437

Measure CPU load of Javascript applications

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?

Upvotes: 16

Views: 2829

Answers (5)

Jacob
Jacob

Reputation: 78850

For a non-scientific but quick way to compare CPU loads, you can launch Chrome's task manager and have the two versions opened in different tabs/windows. It won't help you if you're doing optimization, but it can tell you at a glance whether the new version is taking up less CPU.

Upvotes: 0

adamJLev
adamJLev

Reputation: 14031

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)

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630379

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.

Upvotes: 6

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827276

In addition to the @Ivan answer about the Chrome Dev Tools, I would recommend you to also give a look to the Google Speed Tracer extension for Chrome.

Upvotes: 0

Ivan Nevostruev
Ivan Nevostruev

Reputation: 28713

I think this measurment will be very borwser specific. If you are ok with it, then take a look at build-in developer tools in Chrome browser. There is an option to record performance and compare results later. Here is Getting Started guide (take a look at Profiling and Optimizing video at the bottom).

Upvotes: 0

Related Questions