[material-ui][Dialog][Tooltip] Improve performance with lots of elements

[LorenzHenk]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Adding / removing children to / from the HTML body causes the browser to recalculate the children of the body. With many elements this can have a noticeable performance impact.

Temporary elements should be created in a permanent child of body.

Examples 🌈

This is a contrived example where we're rendering 10000 button elements in the body.
You can clearly see the performance impact on opening the modal dialog.

Bad:
Just use the dialog normally, it will be rendered as direct child of the body.
Opening the modal dialog takes >600ms.

Good:
A custom div in the body that is used as container of the dialog.

Opening the modal dialog takes ~65ms.

This problem also affects other elements based on the Dialog component, e.g. the Drawer.

This problem could also affect the Tooltip component, though after a quick test I wasn't able to see any notable performance improvements (see this demo).

Note: it seems like chrome (firefox not so much) can handle this if the 10000 buttons are nested (see this demo where the buttons are wrapped in a div).

Motivation 🔦

I just read this blog post by @atfzl (thx btw!) about performance pitfalls for children of body. I was wondering if this could affect the material-ui components as well.

[eps1lon]

Thanks for the feedback.

We already have work started in #27699 for the Tooltip.

In 4.x and 5.x you can provide a custom container (e.g. a permanent child of document.body) to the Dialog. So if you see performance problems in your app related to document.body, you can fix it.

However, it's not that trivial to make that the default beheavior since we have to consider iframes etc.

But this is something we want to experiment with, document and then hopefully improve the default behavior.