[core] perf: sx

[romgrk]

Improve sx performance by removing allocations.

Example user code:

Before: 23.4ms +-1.6
After:  15.2ms +-1.1

n=100

We get roughly 35% less rendering time for the example above which makes heavy use of the sx prop, so I guess user-code would see something in the 0-40% less rendering time depending on how much they use that prop.

We can still get a lot more improvement by eliminating more memory allocations (I think we can get that example to at least 50% less rendering time), but the remaining changes would require more substantial work. The format of the style({ [prop]: value, theme }) sx style handlers is expensive, we could instead use something like style(prop, value, theme), though IIUC the system props also use those so there's a bit of refactoring to do.

The logic to create an empty breakpoint object for each sx object/subobject is also expensive, I've tried to remove it by lazily initializing the breakpoints but handleBreakpoints is used too much in the codebase so that's another large refactor.

[mui-bot]

Netlify deploy preview

https://deploy-preview-44254--material-ui.netlify.app/

@mui/system: parsed: +1.38% , gzip: +1.55% @mui/material/Slide: parsed: +1.77% , gzip: +1.96% @mui/material/Zoom: parsed: +1.81% , gzip: +1.93% @mui/material/Fade: parsed: +1.81% , gzip: +1.92% @mui/material/CardHeader: parsed: +1.38% , gzip: +1.53% @mui/material/Select: parsed: +0.71% , gzip: +0.96% @mui/material/SpeedDialAction: parsed: +0.76% , gzip: +0.98% @mui/material/ListItemText: parsed: +1.39% , gzip: +1.48% @mui/material/Box: parsed: +1.56% , gzip: +1.79% @mui/material/styles#createTheme: parsed: +2.50% , gzip: +2.88% @mui/material/Autocomplete: parsed: +0.65% , gzip: +0.83% @mui/material/Container: parsed: +1.47% , gzip: +1.57% @mui/lab: parsed: +0.64% , gzip: +0.89% @mui/material/TextField: parsed: +0.66% , gzip: +0.85% @mui/material/Menu: parsed: +0.97% , gzip: +1.17% @mui/material/Popper: parsed: +1.07% , gzip: +1.29% @mui/material/Dialog: parsed: +1.06% , gzip: +1.24% @mui/material/TablePagination: parsed: +0.58% , gzip: +0.73% @mui/material/Pagination: parsed: +1.01% , gzip: +1.24% @mui/material/Breadcrumbs: parsed: +1.06% , gzip: +1.27% and 122 more changes

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against 3ed64174b386237399c608d6e78e77c6953e85b7

[DiegoAndai]

@romgrk let me know if/when you need a new review on this

[romgrk]

This is nearly complete, the only remaining issue would be the failing Joy UI argos test and adressing Marija's comments, but I don't have enough bandwidth for this with the upcoming DataGrid release. I'll try to finish it when I find some time, but if anyone has interest in getting it merged feel free to take over.

[siriwatknp]

I will spend time on this next week.