mat-spinner burns CPU on chrome

angular / components

Component infrastructure and Material Design components for Angular

https://material.angular.io

MIT License

24.24k stars 6.7k forks source link

mat-spinner burns CPU on chrome #15240

Open zhuhaow opened 5 years ago

zhuhaow commented 5 years ago

Go https://material.angular.io/components/progress-spinner/overview

On chrome it takes quite a lot CPU resource (20-30% on my MacBook) while on Safari it almost takes nothing.

There seems like there has been an issue (#1511) before that has been fixed on other browsers, however, it is still not working on Chrome.

crisbeto commented 5 years ago

The problem in #1511 was that we used to animate the circle using JS, in order to support older browsers. Currently it is being animated with CSS.

zhuhaow commented 5 years ago

Seems like there is some thing different between Chrome and Safari on handling these animations, though I thought they were using similar render engine.

bene-starzengruber commented 4 years ago

Is there any update on this? One spinner is still burning through ~10% of CPU

alan-bio commented 4 years ago

Shouldn't this be implemented with Pure CSS instead of SVG? Maybe it's SVG for compatibility reasons. I will investigate.

wvanderdeijl commented 3 years ago

It appears this is still quite bad. This is Google Cloud console for Cloud Build that shows a number of spinners during a build:

This makes the fans of my MacBook pro spin up like crazy using Chrome 85.0.4183.102: