A small app to measure render performance of various style combinations. Two modes:
| Mode: update 1/1000 | |||||||
|---|---|---|---|---|---|---|---|
| id | last phase | last duration in ms | render count | duration average in ms | duration total in ms | difference duration average | % difference duration average |
| [Static CSS] - Vanilla extract | mount | 1.2000000476837158 | 1 | 1.2000000476837158 | 1.2000 | - | - |
| [Static CSS] - Global | mount | 1.299999713897705 | 1 | 1.299999713897705 | 1.3000 | +0.10000 | +8.3333% |
| [Static CSS] - CSS Modules | mount | 1.2999999523162842 | 1 | 1.2999999523162842 | 1.3000 | +0.10000 | +8.3333% |
| [Inline styles] - stable object | mount | 2.1999995708465576 | 1 | 2.1999995708465576 | 2.2000 | +1.0000 | +83.333% |
| [Styled components] - static styles only unused dynamic ${props => '',props => '',props => '',props => '',props => ''} | mount | 2.4000000953674316 | 1 | 2.4000000953674316 | 2.4000 | +1.2000 | +100.00% |
| [Inline styles] - dynamic object | mount | 2.5 | 1 | 2.5 | 2.5000 | +1.3000 | +108.33% |
| [Styled components] - dynamic, unstable style creation ${props => css({...obj})} | mount | 2.500000238418579 | 1 | 2.500000238418579 | 2.5000 | +1.3000 | +108.33% |
| [Styled components] - static styles only unused dynamic ${props => css``,props => css``,props => css``,props => css``,props => css``} | mount | 2.799999952316284 | 1 | 2.799999952316284 | 2.8000 | +1.6000 | +133.33% |
| [Styled components] - dynamic style creation ${props => css(obj)} | mount | 3.499999761581421 | 1 | 3.499999761581421 | 3.5000 | +2.3000 | +191.67% |
| [Styled components] - static styles, unused handful of unused system props | mount | 3.5 | 1 | 3.5 | 3.5000 | +2.3000 | +191.67% |
| [Box] - SX prop, inside `ThemeProvider` | mount | 3.5999999046325684 | 1 | 3.5999999046325684 | 3.6000 | +2.4000 | +200.00% |
| [Box] - SX prop, stable object | mount | 3.799999952316284 | 1 | 3.799999952316284 | 3.8000 | +2.6000 | +216.67% |
| [Box] - SX prop, dynamic object | mount | 3.8999998569488525 | 1 | 3.8999998569488525 | 3.9000 | +2.7000 | +225.00% |
| [Styled components] - static styles, unused handful of system props with object prop | mount | 3.999999523162842 | 1 | 3.999999523162842 | 4.0000 | +2.8000 | +233.33% |
| [Styled components] - SX prop, stable object | mount | 4 | 1 | 4 | 4.0000 | +2.8000 | +233.33% |
| [Styled components] - static styles only unused dynamic ${props => css``} | mount | 4.099999904632568 | 1 | 4.099999904632568 | 4.1000 | +2.9000 | +241.67% |
| [Box] - SX prop + New css declaration per render {dynamic maxWidth} | mount | 4.1000001430511475 | 1 | 4.1000001430511475 | 4.1000 | +2.9000 | +241.67% |
| [Box] - inline style, inside `ThemeProvider` | mount | 4.500000238418579 | 1 | 4.500000238418579 | 4.5000 | +3.3000 | +275.00% |
| [Styled components] - SX prop + Style update from dynamic prop attrs | mount | 5.299999952316284 | 1 | 5.299999952316284 | 5.3000 | +4.1000 | +341.67% |
| [Box] - inline style | mount | 5.699999809265137 | 1 | 5.699999809265137 | 5.7000 | +4.5000 | +375.00% |
| [Styled components] - SX prop, dynamic object | mount | 5.800000190734863 | 1 | 5.800000190734863 | 5.8000 | +4.6000 | +383.33% |
| [Styled components] - static styles only | mount | 6.200000047683716 | 1 | 6.200000047683716 | 6.2000 | +5.0000 | +416.67% |
| [Styled components] - SX prop + New css declaration per render {dynamic maxWidth} | mount | 7.599999904632568 | 1 | 7.599999904632568 | 7.6000 | +6.4000 | +533.33% |