High CPU usage of javascript - How to debug?

Question

What is the best way to find the cause of high cpu usage of javascript?

I have a script that simply loads photos from flickr in a thumbnail gallery. After they're loaded, nothing is being done (waiting for you to click them to display in a lightbox), but the cpu usage is still 25% or more.

I've opened firebug, clicked profile, waited a bit then clicked it again, but it says "No activity to report". If there was something going on, wouldn't it report? Or am I using this tool wrong?

I am doing this after everything is loaded, just to see what might be causing that high cpu usage.

Thanks, Wesley

Edit: Seem to have traced it's origin.. It's not anything JS related, but CSS! WHAT THE HELL?

The issue is this:

I have a thumbnail gallery, I display a loading indicator instead of the thumbnail whilst the image is loading:

.thumbnail img {
   display:block;
   background-image: url("/images/ajax-loader.gif");
   background-position: center center; 
   background-repeat:no-repeat;
   overflow:hidden;
   color:white;
}

If I remove this code, the cpu usage drops to 0,03% or something.. instead of 20%... Is this because of the animated gif that is still playing, but just covered up?

I did not know that animated gifs take this much from the cpu? Granted, it's doing that more than 20 times, but still. It was the same in safari/chrome as well.

I guess I should either not use the loading indicator thing inside of each image, or remove the background-image on a successful load of the image..

Answer 1

I have used over the last weeks the tool "dynaTrace AJAX Edition" (free tool) for analyzing web sites (not only JavaScript). It has some pretty good views that show the usage of resources. Give it a try to track down the part of the javascript (or other parts of the browser) that are the reason for high cpu usage. However the tool is only working with firefox and current internet explorer implementations, but when you use firebug, that seems to indicate that you are using firefox.

There is an entry on their forums page named "What else can impact Browser CPU Usage and AJAX Performance?" which gives some more hints that may help.