28

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

  • Try waiting for about a minute or so, before ending the profiling in Firebug. – Delan Azabani Jul 23 '11 at 09:36
  • Even after a minute the profiler shows nothing.. it does when I interact with the javascript so it is set up correctly. –  Jul 23 '11 at 09:46
  • Stop using jQuery. It murders your CPU. – Raynos Jul 23 '11 at 10:35
  • 3
    Actually, I traced it back to animated loading indicators for images via CSS.. –  Jul 23 '11 at 12:21
  • 1
    @Wesley, are 'loading indicators' just 'gifs' that show an image indicating to the user that their content is being loaded? Why would that make your CPU run high? – Kevin Meredith Dec 03 '12 at 16:17
  • I've been running into a similar issue (loading indicator (animated gif) as background below a Facebook Like iframe). Somehow this triggers high CPU usage in Firefox after a while (while developing on the site, and having it open in multiple tabs). @KevinMeredith would not have expected this to be an issue, too, but just removing the background image via Firebug resolved it. Maybe it's only an issue when using Firebug or something similar. – blueyed Jan 03 '14 at 23:47

3 Answers3

4

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.

mliebelt
  • 15,345
  • 7
  • 55
  • 92
  • Got firefox, but I'm on a mac.. May try this if no other suggestions present themselves. –  Jul 23 '11 at 10:30
  • Sorry for you, the supported platforms are: Windows XP (32 bit), 2003, Vista (32/64 bit), or 7; Internet Explorer 6, 7, or 8; Firefox 3.6, 4, 5 – mliebelt Jul 23 '11 at 10:46
  • And there is no indication on their website that this (working only on windows) will change soon :-( – mliebelt Jul 23 '11 at 10:52
  • 1
    Traced it, not javascript related.. since the profiling was not showing anything. it's due to loading indicators used as bg of images.. animated gifs are the cause. –  Jul 23 '11 at 12:24
  • How about answering your own question? Describe there how you traced it, and you will get my thumbs up ... :-) – mliebelt Jul 23 '11 at 13:03
  • Didn't really trace it. Profiler in firefox and safari showed no js at all. So it had to be something else. Trial and error. –  Jul 23 '11 at 13:25
  • Had issue with css3 animation used for loading icon and it was shooting up the CPU usage. Once it was removed, the issue went away! – suDocker Oct 03 '13 at 08:31
  • Dynatrace is 500MB. I never downloaded it. Then I got 3 mails and a call although I did not give my phone number. Very aggresive marketing there – ropo Mar 19 '15 at 13:34
3

You could try Chrome/Chromium Developer Tools » Profiler, Start, reload the page, wait a few minutes and stop it. It would be enough data to have a clue of what could be the problem.

Another common issue with high cpu usage on browsers it's css animations, (as well as gif images). I've been stuck with a high cpu usage issue when developing a web application, it was weird that it only happened when the tab was active/visible, but when on background it didn't, and the problem were present on FF, Chrome and Chromium. Finally it turned to be animated Bootstrap Progress bar.

You could check this easily here http://getbootstrap.com/components/#progress-animated, open it on Chrome, open Tools » Task Manager, then Toggle animation on Bootstrap site and check cpu usage.

I guess this is not strictly an answer to the question, but a usefull tip to find the problem. Since I can't comment yet, I decided to post it as an answer as someone could find it usefull, let me know if this is such a bad practice.

jmelero
  • 83
  • 6
2

Try to reload the page after enabling FireBug profile feature.

I heavilly used FireBug profile feature to do this. You can see which function is consuming most of the time. Great thing. Try this on other pages with simple javascript example. It should work well. If it doesn't work in your example, just post them a bug.

Tomas
  • 57,621
  • 49
  • 238
  • 373
  • I would really like to see the profile of what happens when there is no user interaction, if I reload the page the report will be "contaminated" by initialization routines. –  Jul 23 '11 at 10:32
  • 1
    This is much better than selected answer and requires a hell of a lot less time, *money*, effort, especially with the results, more so if you already have FireBug (in Firefox), which you'd be crazy not to have as a web developer. – simontemplar Mar 14 '18 at 08:57