[core] Browser benchmark baseline is set to 'Grid (html)' instead of 'React primitives'

[agarmaise]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

• Current status: https://github.com/mui/material-ui/blob/master/benchmark/browser/scripts/benchmark.js
• Initial PR adding printMeasure function that takes a baseline: https://github.com/mui/material-ui/pull/23729/files

Steps:

1. Run yarn benchmark:browser
2. Observe output

Current behavior 😯

In the output, the first two cases are time measurements and the rest are relative to the baseline, which is set to Grid (html).

noop (baseline):
  06.46 ±00.51ms
Grid (html):
  72.39 ±05.44ms
Grid System:
  181 ±11%
Grid Material UI:
  178 ±20%
Table:
  122 ±12%
React primitives:
  61 ±9%
React components:
  59 ±3%
Styled MUI:
  93 ±6%
Styled emotion:
  91 ±8%
Styled SC:
  85 ±9%
makeStyles:
  85 ±10%
Box Baseline:
  156 ±23%
Box MUI:
  248 ±19%
Box Theme-UI:
  250 ±15%
Box Chakra-UI:
  194 ±35%
styled-components Box + @mui/system:
  203 ±23%
styled-components Box + styled-system:
  140 ±18%
Done in 104.00s.

Expected behavior 🤔

I would expect the later cases to be compared against a more generic baseline. Originally this was React primitives, which seems reasonable. Starting with the addition of the Table case, it looks like the impact on baseline selection was not noticed.

Context 🔦

I noticed this while running some custom benchmarks locally after following the link from the docs on performance trade-offs: https://mui.com/system/getting-started/usage/#performance-tradeoffs

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.58)
  npmPackages:
    @emotion/react:  11.11.1
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.24
    @mui/codemod:  5.14.18
    @mui/core-downloads-tracker:  5.14.18
    @mui/docs:  5.14.18
    @mui/envinfo:  2.0.13
    @mui/icons-material:  5.14.18
    @mui/internal-waterfall:  1.0.0
    @mui/joy:  5.0.0-beta.15
    @mui/lab:  5.0.0-alpha.153
    @mui/markdown:  5.0.0
    @mui/material:  5.14.18
    @mui/material-next:  6.0.0-alpha.110
    @mui/private-theming:  5.14.18
    @mui/styled-engine:  5.14.18
    @mui/styled-engine-sc:  6.0.0-alpha.6
    @mui/styles:  5.14.18
    @mui/system:  5.14.18
    @mui/types:  7.2.9
    @mui/utils:  5.14.18
    @mui/x-charts:  6.18.1
    @mui/x-data-grid:  6.18.1
    @mui/x-data-grid-generator:  6.18.1
    @mui/x-data-grid-premium:  6.18.1
    @mui/x-data-grid-pro:  6.18.1
    @mui/x-date-pickers:  6.18.1
    @mui/x-date-pickers-pro:  6.18.1
    @mui/x-license-pro:  6.10.2
    @mui/x-tree-view:  6.17.0
    @mui/zero-jest:  0.0.1-alpha.0
    @mui/zero-next-plugin:  0.0.1-alpha.0
    @mui/zero-runtime:  0.0.1-alpha.0
    @mui/zero-tag-processor:  0.0.1-alpha.0
    @mui/zero-vite-plugin:  0.0.1-alpha.0
    @types/react: ^18.2.37 => 18.2.37
    react:  18.2.0
    react-dom:  18.2.0
    styled-components:  6.1.1
    typescript: ^5.1.6 => 5.1.6

[mnajdova]

Thanks for the suggestion. We'll take this into account when we start adding more benchmarks around the zero-runtime we are working on for v6. cc @brijeshb42