search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.65k stars 32.22k forks source link

[Tabs] Avoid forced reflow #23710

Open shayantabrizi opened 3 years ago

shayantabrizi commented 3 years ago

In Tabs.js, https://github.com/mui-org/material-ui/blob/79ebf71d31cca2c73143891960ea54ec1132bdeb/packages/material-ui/src/Tabs/Tabs.js#L137 , getBoundingClientRect is called. In our application, in the developer tools, the performance profile of our application complains that "Warning Forced reflow is a likely performance bottleneck". According to this, it seems that calling getBoundingClientRect may cause performance problems in some scenarios. Is it possible that getBoundingClientRect is replaced by something else that doesn't cause a forced reflow?

oliviertassinari commented 3 years ago

@shayantabrizi outside of Chrome's dev tools complaining about it, did you experience a performance issue? I recall seeing this warning too in the past using the library. Which version are you using? Do you have a reproduction? Do you have a screenshot of the issue to share?

Regarding the need for this method, it will go away with #9337.

We have solved a similar issue in the past with https://github.com/mui-org/material-ui/issues/11673.

shayantabrizi commented 3 years ago

It seems that there IS a performance issue. According to my profiling results, it seems that in some cases about half or even more of time is spent on "Recalculate Style" and "Layout" which are marked with "Warning Forced reflow is a likely performance bottleneck".

My version is: 4.11.0. Screenshots: Sc2

Sc1

oliviertassinari commented 3 years ago

@shayantabrizi Ok thanks. If you could provide a reproduction, that would help resolve it.

shayantabrizi commented 3 years ago

Unfortunately, I don't know what happens exactly. I just encounter a probable performance problem in our application which is not open-source. It just seems to me that getBoundingClientRect is better to be replaced with something else.

Ritorna commented 3 years ago

most likely this performance issue comes up when dealing with complex layouts (i. e. multiple/nested css grid areas comined with multiple elements like textfields and so on). @shayantabrizi, you could try "isolating" some of your layout areas using the css contain property using strict or layout, to tell the browser to only recalculate the given dom tree if any layout measurement needs to be done. In our case it did help improving the performance. Yet an optimized solution would be great.

shayantabrizi commented 3 years ago

most likely this performance issue comes up when dealing with complex layouts (i. e. multiple/nested css grid areas comined with multiple elements like textfields and so on). @shayantabrizi, you could try "isolating" some of your layout areas using the css contain property using strict or layout, to tell the browser to only recalculate the given dom tree if any layout measurement needs to be done. In our case it did help improving the performance. Yet an optimized solution would be great.

Seems interesting. Thank you.