1

http://pepijndevos.nl/ uses a lot of CPU on Firefox, and surprisingly also Xorg.

There is basically no JS going on, and certainly no window resizing or stuff like that.

Tasks: 245 total,   2 running, 243 sleeping,   0 stopped,   0 zombie
%Cpu(s):  8,7 us,  0,5 sy,  0,0 ni, 90,6 id,  0,0 wa,  0,0 hi,  0,2 si,  0,0 st
KiB Mem:   8052196 total,  3121524 used,  4930672 free,   292388 buffers
KiB Swap:  8266748 total,        0 used,  8266748 free.  1258032 cached Mem

  PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND      
 1223 root      20   0  567100 238528  73272 S  37,9  3,0  22:33.44 Xorg         
 5036 pepijn    20   0 2257996 543324  94428 R  31,9  6,7  16:26.62 firefox

The only JS on the page is Google Analytics, MathJax, and this small bit http://pepijndevos.nl/js/magic.js

I did a performance analysis in the Firefox debugger, which only shows Paint and Recalculate Style.

enter image description here

The cause seems to be the CSS animation on the background image. When I remove the animation, the system goes back to idle. The offending line is

@keyframes spin { 100% { transform:rotate(360deg) } }

I'm only rotating it really slowly, so there is absolutely no need to render the whole thing at 60fps. Is there a way to make it use less CPU? I might need to revert to the ugly setInterval solution I had years ago.

(there are a few similar questions, but I feel this is not a duplicate as my animation should not actually be taxing for any modern CPU, contrary to dozens of big fast animations with shadows and other special effects in other questions)

Pepijn
  • 4,145
  • 5
  • 36
  • 64
  • That is interesting. Generally [`transform` change shouldn't cause a repaint](http://csstriggers.com/#transform) and hence should be easier on the system. – Harry Jan 02 '16 at 13:02
  • 1
    Can you perhaps track the animation actually ended with an 'on animation end' event??, can't reproduce your issue in the URL provided, can you post a test case so we can annalyse your code?? – wolfitoXtreme Jan 02 '16 at 13:16

1 Answers1

1

I guess that the problem comes from position: fixed, but I am not sure.

What you can do to save CPU is to make it update less often:

animation: spin 600s steps(3600) infinite;

will make the wheel stay still for 1/6 of a second. (or. otherwise said, to refresh 6 times per second)

vals
  • 61,425
  • 11
  • 89
  • 138