Performance in transitions

[tomascharad]

Problem Description

Hi guys,

I have been having performance issues that might be related to transition.js dependencies of material-ui.
I have a medium size SPA using redux.
I believe that one of the most CPU consuming process of my app are the ones related with material-ui components.
I don't know if this is a fixable issue, but I'm attaching a snapshot of my chrome cpu profile.

Versions

• Material-UI: "material-ui": "^0.15.0-alpha.2"
• React: "react": "^0.14.8"
• Browser: Chrome Version 49.0.2623.110 (64-bit)

[appetizermonster]

I found a hacky way to improve performance if you don't need an css autoprefixer.
You just provide a muiTheme that has an property userAgent: false, then transition wouldn't be called.
See this code

e.g.

const muiTheme = getMuiTheme({
  userAgent: false
});

...
render() {
  <MuiThemeProvider muiTheme={muiTheme}>
    ...
  </MuiThemeProvider>
}
...

[nathanmarks]

@appetizermonster thanks appetizer -- we have several issues open that are related to performance and styling. This is going to be addressed soon.

[tomascharad]

Hi @appetizermonster, thanks for the hack, I'll dig into it.
@nathanmarks which issue is the duplicated one so I can track it? #42 ?

[nathanmarks]

@tomascharad some of these are related: https://github.com/callemall/material-ui/issues?q=is%3Aopen+is%3Aissue+label%3APerformance

Lots of the performance issues come down to recalculating styles and re-renders.

Style related perf issues are a goal to fix in 0.16.0 -- a big one at that.

[nathanmarks]

@tomascharad I don't see a specific issue for all of it, the styles issue is scattered around other issues (including perf) -- but we will have an umbrella styles issue that covers it all.

[tomascharad]

Many thanks for the information @nathanmarks .
I'll be alert on the performance tag then.