Spinner uses 50% CPU

[nevf]

I've just upgraded to V3 and made use of the new icon-spinner class and am seeing CPU use sit at around 50% in Google Chrome when the spinner is active. I'm seeing similar high CPU use when I open the FontAwesome website. Other CSS spinners I've checked don't have this problem.

Update: I've looked into this a bit further and have tested it on 3pcs and only (older) PC is exhibiting the issue. So it may be related to the video card or driver or some such and not an issue with your spinner as such. It is still interesting that other spinners are ok. I assume it has something to do with the specific css being used.

A good article on HTML Performance including CSS animation is: http://www.html5rocks.com/en/tutorials/speed/html5/ And this SO post is interesting. ie. "use translate3d, scale3d, rotate3d as they are hardware accelerated"

[davegandy]

Yep, this is a definite problem. I'll add it to the next minor release.

[davegandy]

Been poking at this issue on the Font Awesome test.html test case page. No CPU usage issues on Safari. 95%+ CPU on Chrome, 20%+ on Firefox. Other icon fonts with this animation also have this problem, but there are no pages with as many spinning icons at the FA docs, so you don't see it as much. When there are only 3 or 4 spinning elements on a page, CPU usage isn't very noticeable.

I'm currently out of solutions, so if someone else wants to poke into it, that would be very much appreciated.

[tagliala]

@davegandy

Animations should use the 3d acceleration. You could simply add translateZ(0) to the spin animation but unfortunately browsers are not of the same opinion (Opera doesn't work at all, so this is not a solution...)

http://jsfiddle.net/uQG3x/7/

Chrome (on windows):

• CPU usage decreases form 50% to 30%
• Hovering on list items is smoother

Firefox (on windows):

• Same CPU usage
• Same sluggish effect on hovering
• The rotation is "centered"

IE 10:

• No effects

Opera (on windows):

• Doesn't work

[dv]

Even one spinning icon completely maxes out the GPU in Chrome, on a retina Macbook. Also when using the 3D accelerated version in the JSFiddle. Does not happen in Firefox.

This is on the default retina resolution (1440x900 @2X)

[dv]

@tagliala pressed "Toggle 3D spinning", and even though the icons weren't spinning, GPU again maxed out.

[tagliala]

Yes 3drotate doesn't work on chrome I forgot...

[dv]

Since the GPU is being taxed it's definitely doing something though! Quite a mysterious bug here, probably more to do with Chrome's implementation of those CSS transitions for retina screens than with FontAwesome.

[tagliala]

does it happen on other pages too?

http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

this is a real intensive one

[dv]

Yes, but only when moving.

[davegandy]

As this is an issue with Chrome and not Font Awesome (other browsers do not show this problem and other animations DO show this issue in Chrome), I am closing.

[si14]

This issue still persists in Chrome dev channel. Are you sure that this is "the issue with Chrome", given that Chrome is the most popular browser and that this issue makes Font Awesome's spinners completely unusable for almost a year?

[dv]

@si14 unfortunately yes. Chrome has many bugs/quirks once you go beyond trivial that are quite "shocking", especially considering its popularity.

[ropez]

This issue is present in all these browsers: Chromium 30.0.1599.114 Ubuntu 13.04 Firefox 25.0.1 (Ubuntu) Ekioh webkit browser on Motorola STB (http://www.onevideo.co.uk/vip1003.html)

[tagliala]

@ropez

How is the cpu usage in this fiddle: http://jsfiddle.net/tagliala/WF4yF/

?

[dv]

@tagliala I get exact same results (i.e. GPU maxes out, fans start spinning). It's definitely not a font-awesome problem but rather a problem in Chrome with infinite animations.

[tagliala]

@dv it's also a fontawesome problem because it uses 2d spinning that is cpu intensive

We should switch to 3d spinning (rotateZ), please report me cpu usage of this one: http://jsfiddle.net/tagliala/WF4yF/

[ropez]

@tagliala That page is actually fine. I realize now that I don't have the latest version: font-awesome#3.2.1 I guess I assumed that nothing was done, since this issue was rejected.

[dv]

@tagliala I see - the CPU does not increase noticably for me on that one, but the GPU does, and it has the same effect, although for 80%+ of the people that'd be a better outcome I think.

[tagliala]

@dv that is not 3d rotation... it's the standard fontawesome's one

[tagliala]

I will prepare another test

[dv]

@tagliala Yep, I think on mine, Chrome automatically generates a composited layer (GPU) for all CSS animations even without a hack to make it so, so it makes sense that it's not using the CPU.

Chrome Version 31.0.1650.63, Mac OS X Mavericks, Retina display.

[tagliala]

@dv @ropez please take a look at: http://jsfiddle.net/tagliala/XrE9S/embedded/result/ http://jsfiddle.net/tagliala/pM84T/embedded/result/

Let me know if there is any difference

[dv]

@tagliala I don't see a noticeable difference: both turn my GPU on maximum and CPU usage stays around 14% for both.

[tagliala]

http://jsfiddle.net/tagliala/rDSC6/embedded/result/

this one doesn't use fontawesome.

Same thing?

[dv]

Yep, same result

[ropez]

@tagliala I see no difference between the two links. Both are quite fine.

Chromium reports about 10% CPU usage for the tab, but about 100-150% for the "GPU Process", at the same time, the OS reports about 20% total CPU usage for chromium. Firefox is a bit better, about 10% CPU usage reported by the OS.

[tagliala]

It seems that we can't solve this one :\

[ropez]

I''m curious what you mean by that, since the problem seems to be solved in all your fiddles :-/

[tagliala]

@ropez sorry maybe I didn't understand

http://jsfiddle.net/tagliala/XrE9S/embedded/result/ <-- this one is using the spinning method currently implemented in fontawesome: if this is fine, then fontawesome 4.0.3 is fine

http://jsfiddle.net/tagliala/rDSC6/embedded/result/ <-- this one doesn't use fontawesome at all: if this is not fine, we can't solve this

[ropez]

http://jsfiddle.net/tagliala/XrE9S/embedded/result/ current 4.0.3 works fine for me. I suppose the problem was that I was using an old version in the first place.

However, I haven't been able to test all these fiddles in the embedded STB browser that I mentioned in my first comment, at least not yet. I actually just stumbled across this because a skeleton we're using for a new Durandal app had this problem in the example pages. Spinning icons are still far down the road for this project.

[programmin1]

This one doesn't use excessive CPU on my Firefox, and it seems to be related to the steps(number) in animation css. http://lea.verou.me/2013/11/cleanest-css-spinner-ever/

[AndyScott77]

I've found that font-smoothing has a minor (~ <10% reduction) CPU load effect, so I apply :

-webkit-font-smoothing: none; to the @{fa-css-prefix}-spin mixin

[danielbonnell]

This is still a problem when applying the fa-spin class to an icon. I'm using v4.6.3.0 and notice that a single instance of fa-spin on the page results in a CPU usage spike of 8-10%. It's not 50%, but it's certainly noticeable. My solution was simply to use Angular/jQuery to hide the element when not in use.

[programmin1]

@danielbonnell Are you sure that 8-10% wasn't half of one processor? Depends on what cpu meter you are using. steps(n) is a good way to reduce it if it looks ok.

[danielbonnell]

@programmin1 That was based off the Chrome Task Manager reporting that the tab in question was idling at 8-10% vs 0% when no instances of fa-spin are visible in the DOM. I agree it's not an exact measurement, but the hit is noticeable even without looking at the CPU meter. I'm running this on a 2009 MacBook Pro, 2.26GHz Core 2 Duo, 8GB RAM, and an SSD. Definitely an older machine, but it performs fine for most of the development I do.