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..