mui / mui/material-ui

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

Open
#39,971 1 comment 0 reactions 1 assignee View on GitHub

@mnajdova is already working on this.

Since Nov 23, 2023.

internal performance test
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Link to live example:

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.