[internal] perf: sx by romgrk · Pull Request #44254 · mui/material-ui

romgrk · 2024-10-29T13:12:17Z

Improve sx performance by removing allocations.

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 · 2024-10-29T13:14:56Z

Netlify deploy preview

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

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+1.08KB^(+0.21%)	🔺+445B^(+0.29%)
@mui/lab	🔺+2.46KB^(+7.54%)	🔺+946B^(+11.54%)
@mui/system	🔺+1.24KB^(+1.80%)	🔺+481B^(+1.92%)
@mui/utils	🔺+849B^(+6.61%)	🔺+255B^(+5.06%)

Details of bundle changes

Generated by 🚫 dangerJS against 71fc34e

packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts

romgrk · 2024-11-04T16:30:52Z

packages/mui-joy/src/styles/extendTheme.ts

    getCssVar,
    spacing: getSpacingVal(spacing),
    font: { ...prepareTypographyVars(mergedScales.typography), ...mergedScales.font },
+    internal_cache: {},


I would have expected to have to add .internal_cache to the system's createTheme function only, but I ended up needing to add it at various locations. It would be neat to pass all our themes through that function to avoid repeating internal details in various places.

Why couldn't we just add it in the createTheme function? What was the issue?

Some created theme objects don't go through system's createTheme at all. I don't feel confident enough to pass them all through it at this point, I'm not sure what edge-cases I might find doing so.

mnajdova · 2024-11-12T10:42:48Z

docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.js

-    <Div color="white" bgcolor="palevioletred" p={1}>
-      Styled components
-    </Div>
+    <ThemeProvider theme={theme}>


Why did we need to change this demo?

mnajdova · 2024-11-12T10:44:13Z

packages/mui-joy/src/styles/extendTheme.ts

    getCssVar,
    spacing: getSpacingVal(spacing),
    font: { ...prepareTypographyVars(mergedScales.typography), ...mergedScales.font },
+    internal_cache: {},


Why couldn't we just add it in the createTheme function? What was the issue?

mnajdova · 2024-11-12T10:45:10Z

packages/mui-system/src/breakpoints/breakpoints.js

@@ -1,7 +1,12 @@
 import PropTypes from 'prop-types';
+import isObjectEmpty from '@mui/utils/isObjectEmpty';
+import fastDeepAssign from '@mui/utils/fastDeepAssign';


Suggested change

import fastDeepAssign from '@mui/utils/fastDeepAssign';

import deepAssign from '@mui/utils/deepAssign';

When I name something fast... it usually means there's a trade-off with correctness to focus on being "fast". Here it's that it doesn't handle exotic objects as other implementations will, as in, it will also traverse enumerable properties on the object's prototype. In the cases where we use this function (to create React props objects copies, or to create CSS style objects) we can safely assume that invariant is true. I should add this to the jsdoc, but I like having some sort of warning in the name.

Adding this to the jsdoc would definitely help. On the other hand, I would recommend maybe moving this util outside of @mui/utils, if it is only used in the mui-system, to avoid developers accidently using it in other places where it may not be the right thing. If you already plan to use it in other places, then probably we can keep it in @mui/utils.

mnajdova · 2024-11-12T10:53:37Z

packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts

+
+  if (isPrimitive(source)) {
+    return source;
+  } else if (isPrimitiveOrBuiltIn(target)) {


Why not just check for built in here? We have the primitive check already on the previous condition.

I didn't write it, I pulled it from the source listed at the top and made a few modifications to simplify it. I could simplify it further.

Ah, I thought is a new code, we can update it later in that case, up to you.

DiegoAndai · 2025-02-18T19:12:35Z

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

romgrk · 2025-02-18T19:17:37Z

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 · 2025-05-01T14:32:48Z

I will spend time on this next week.

# Conflicts: # docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.js # docs/data/system/getting-started/custom-components/CombiningStyleFunctionsDemo.tsx # packages/mui-system/src/createStyled/createStyled.js # packages/mui-system/src/cssContainerQueries/cssContainerQueries.ts # packages/mui-system/src/merge/merge.ts # packages/mui-system/src/style/style.d.ts # packages/mui-system/src/styleFunctionSx/styleFunctionSx.js

perf: initial work

cb1539b

romgrk added performance internal Behind-the-scenes enhancement. Formerly called “core”. labels Oct 29, 2024

romgrk added 12 commits October 29, 2024 10:05

perf: more work

be47607

lint

e387422

lint

2da8c80

lint

5cf7676

lint

f65132c

lint

490e808

lint

17eb786

lint

6d2f759

lint

4f7de94

perf: more work

89d3e11

lint

d88d4db

perf: remove allocations

c288aac

romgrk commented Oct 30, 2024

View reviewed changes

packages/mui-utils/src/fastDeepAssign/fastDeepAssign.ts Show resolved Hide resolved

romgrk added 13 commits October 30, 2024 01:49

lint

7d70f97

perf: container queries

a221c46

lint

b1cdfcb

Merge branch 'master' into perf-sx

d4141ca

lint

f7fe570

lint

ec67cbb

perf: compose()

5ef7075

refactor: alternateProp logic for fontFamilyCode

0123e02

lint

07e4410

lint

f202bc8

lint

d9f7017

lint

046d66b

perf: improve breakpoint mq cloning

d586a77

romgrk added 9 commits November 1, 2024 16:44

refactor: hasBreakpoint

6c32c64

lint

e6f2319

lint

db32450

lint

b120356

refactor: removeUnusedBreakpoints

aa57a19

refactor: iterateBreakpoints

0b6c30d

refactor: sortContainerQueries

811d63a

lint

419cfc6

lint

f096175

romgrk marked this pull request as ready for review November 4, 2024 16:10

romgrk requested a review from a team November 4, 2024 16:10

romgrk commented Nov 4, 2024

View reviewed changes

lint

3455a04

mnajdova reviewed Nov 12, 2024

View reviewed changes

romgrk mentioned this pull request Feb 17, 2025

[DataGrid] Column management design updates mui/mui-x#16630

Merged

Merge branch 'master' into perf-sx

260cfd3

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 7, 2025

romgrk added 2 commits April 28, 2025 21:52

Merge branch 'master' into perf-sx

6aaf325

Merge branch 'perf-sx' of github.com:romgrk/material-ui into perf-sx

6580df8

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 29, 2025

refactor: fix merge conflict

3ed6417

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 12, 2025

oliviertassinari changed the title ~~[core] perf: sx~~ [internal] perf: sx Aug 16, 2025

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 10, 2026

mnajdova added 2 commits March 10, 2026 12:48

fix layers

354fa02

lint

71fc34e

	import fastDeepAssign from '@mui/utils/fastDeepAssign';
	import deepAssign from '@mui/utils/deepAssign';

Uh oh!

Conversation

romgrk commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Oct 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

romgrk Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mnajdova Nov 13, 2024 • edited by Janpot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DiegoAndai commented Feb 18, 2025

Uh oh!

romgrk commented Feb 18, 2025

Uh oh!

siriwatknp commented May 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

romgrk commented Oct 29, 2024 •

edited

Loading

mui-bot commented Oct 29, 2024 •

edited

Loading

romgrk Nov 12, 2024 •

edited

Loading

mnajdova Nov 13, 2024 •

edited by Janpot

Loading