-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tab componentDidUpdate forces reflow #11673
Comments
@toddtarsi I'm not against the option of adding a
Do you have some benchmark/monitoring graph to confirm this? |
I have been running some profiling, but its on Android against a heavy UX, so it's not really a good reproduction. If you'd like, I can produce a more directed benchmark this weekend to demonstrate. We have a moderately complex application, and on this page, there's about 10 list items (love the new list items btw!), a drawer, 3 tabs, maybe 10 buttons, and a few drop down menus. So, the render times can get pretty rough on low end Android. Basically, I have just been profiling via Chrome debugger tools, chasing down the call trees, and looking for any unneeded DOM thrashing. The purple is DOM thrashing, which came down to two sources. Button ripples and Tab. Button ripples were easy to deal with. Android running just like web: After disabling touch ripple on list items, menu items, and buttons, but still with tabs. After disabling the touch ripple on tabs: You can see there's still some purple, because I missed another DOM thrash that happens in getTabsMeta (unfortunately, I just tested the componentDidUpdate to see if there were significant savings). That said, I got about a half second off there. Also I should mention, all the yellow is just me doing too many cache writes and causing a couple of vdom renders before it settles down. However, on the tabs, the name text never changes, and since its on Android, it never resizes either, so I know for a fact that its safe on spacing dimensions after its mounted. |
EDIT: I don't change the tab label text or the screen / tab size, but I do change the children! |
I have done some digging, here is what I could profile on a high-end device. I don't understand. I don't see any performance improvement potential. @toddtarsi Do you have a reproduction benchmark where I could see this problem? |
@oliviertassinari - Yeah, I can put something together, but it might take me a bit this week. I think the forced reflow kind of scales in complexity with the DOM. Also, thanks for getting back to me and testing. I appreciate the swiftness and will do what I can to provide some data. |
@toddtarsi I would love that! Maybe a codesandbox would be enough. |
@oliviertassinari - I just wanted to say that I won't be able to do anything substantial here after all this week or weekend, but I will next week. Family vacation is this weekend, so I'm getting ready to vanish. 😄 |
@toddtarsi Investigating a slowness issue on our product, I have noticed the same issue: However, it only accounts for ~10% of the slowness I'm experiencing with a specific page. It's not a huge priority. |
One of our apps is having this issue but it seems to be pretty much locking up the UI. (Maybe because it affects other layout-responsive components?) We're thinking we'll probably use something besides tabs for unrelated reasons, but we may dig into the issue at some point. |
The |
Hi, great repo and nice rollout of 1.x! I'm liking this repo a lot, but I have a slight issue with the Tabs implementation, in that it forces a DOM thrash on the componentDidUpdate call.
https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Tab/Tab.js#L100
This getBoundingClientRects call is really hitting me pretty hard on Android. Is there anyway I could modify this component, and add a property like 'ignoreChanges', to just not call this on componentDidUpdate at all? Performance is that important to me at this point. I could also PR this, if that would help. I enjoy the chance to help out.
The text was updated successfully, but these errors were encountered: