Material-ui: [LinearProgress] VERY expensive (50% CPU usage for 1 instance)

[matthewoates]

Problem description

50% CPU usage on a new Retina MBP on the demo page with 2 progress indicators (only 1 of which is animating)
http://www.material-ui.com/#/components/linear-progress

By contrast, here's a page with 10 different active animations running and much lower CPU usage. (10%)
http://kyleamathews.github.io/react-spinkit/

The component looks great, but sadly In it's current state linear-progress is unusable.

Steps to reproduce

Visit http://www.material-ui.com/#/components/linear-progress and open the chrome task manager. (top right hamburger -> more tools -> task manager

Versions

• Material-UI: latest demo
• React:
• Browser: Chrome 50

[nathanmarks]

@matthewoates 13" By any chance? What is your CPU like when you do a google hangout w/ video?

[nathanmarks]

@matthewoates (Not saying this isn't an issue -- just trying to gauge the level of impact relative to other apps I find make the retina MBPs without dedicated graphics go crazy)

[nathanmarks]

Well, we aren't going to follow angular-material's technique either ;)

[nathanmarks]

Or material design lite:

[nathanmarks]

materializecss is even worse:

@matthewoates Performant linear progress, where art thou? 😄

[nathanmarks]

@matthewoates Polymer's is best for me so far: https://elements.polymer-project.org/elements/paper-progress?view=demo:demo/index.html&active=paper-progress

[nathanmarks]

They are using transform: https://github.com/PolymerElements/paper-progress/blob/master/paper-progress.html

[matthewoates]

@nathanmarks : thanks for diving into this head first!

Chrome Version 50.0.2661.102 (64-bit)
OSX Yosemite Version 10.10.5
MacBook Pro (Retina, 15-inch, Mid 2015)
2.8 GHz Intel Core i7
16 GB 1600 MHz DDR3
Macintosh HD
Intel Iris Pro 1536 MB

Yes, my MBP has a dedicated graphics card.

Forgive me if the team is already aware of this, but I found a good Google IO talk about the various expenses of css transforms and other DOM manipulations. https://www.youtube.com/watch?v=thNyy5eYfbc
TL;DR: use transform (but only some transforms)

I think modeling the Linear-Progress component after Polymer's implementation would be great.

[nathanmarks]

@matthewoates No worries!

I'll definitely check that video out. Do you fancy having a go at trying out the transform technique instead?

[nathanmarks]

@matthewoates Nice to see that I'm not alone with my issues -- but you should see what happens on the internet with the 13" and no dedicated graphics card! 😄

[matthewoates]

Yeah, I'm definitely interested. I'll have time to tackle this next week.

[oliviertassinari]

The performance looks better on the v1-alpha branch:

Polymer

Material-UI