[system] Add browser benchmark (#22923)

mnajdova · web-flow · commit a4a4476e0219 · 2020-10-12T15:21:27.000+02:00
diff --git a/benchmark/README.md b/benchmark/README.md
@@ -0,0 +1,11 @@
+# Browser benchmark
+
+This project is used when running the following command:
+
+```sh
+yarn benchmark
+```
+
+It is suppose to give developers comparable values between running different scenarios inside the browser, that can be find the `./scenarios` folder.
+
+You should use these numbers exclusively for comparing performance between different scenarios, not as absolute values. There is also a `./noop` scenario, that renders nothing, to give you the idea of the initial setup time before the actual code is being run.
diff --git a/benchmark/index.html b/benchmark/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Perf scenario</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <style>body { background-color: white; }</style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="../../tmp/benchmark.js"></script>
+  </body>
+</html>
diff --git a/benchmark/index.js b/benchmark/index.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+// Get all the scenarios
+const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/);
+
+const rootEl = document.getElementById('root');
+
+const scenarioSuitePath = window.location.search.replace('?', '');
+
+const Component = requirePerfScenarios(scenarioSuitePath).default;
+
+const start = performance.now();
+let end;
+
+function TestCase(props) {
+  const ref = React.useRef(null);
+
+  React.useLayoutEffect(() => {
+    // Force layout
+    ref.current.getBoundingClientRect();
+
+    end = performance.now();
+    window.timing = {
+      render: end - start,
+    };
+  });
+
+  return <div ref={ref}>{props.children}</div>;
+}
+
+TestCase.propTypes = {
+  children: PropTypes.node,
+};
+
+ReactDOM.render(
+  <TestCase>
+    <Component />
+  </TestCase>,
+  rootEl,
+);
diff --git a/benchmark/scenarios/box-emotion/index.js b/benchmark/scenarios/box-emotion/index.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styledEmotion from '@emotion/styled';
+import { ThemeProvider as EmotionTheme } from 'emotion-theming';
+import { styleFunction } from '@material-ui/core/Box';
+import { logReactMetrics } from '../utils';
+
+const materialSystemTheme = createMuiTheme();
+const Box = styledEmotion('div')(styleFunction);
+
+export default function BoxEmotion() {
+  return (
+    <React.Profiler id="box-emotion" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <EmotionTheme theme={materialSystemTheme}>
+          <Box
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            emotion
+          </Box>
+        </EmotionTheme>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/box-material-ui-styles/index.js b/benchmark/scenarios/box-material-ui-styles/index.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
+import BoxStyles from '@material-ui/core/Box';
+import { logReactMetrics } from '../utils';
+
+const materialSystemTheme = createMuiTheme();
+
+export default function BoxMaterialUIStyles() {
+  return (
+    <React.Profiler id="box-material-ui-system" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <StylesThemeProvider theme={materialSystemTheme}>
+          <BoxStyles
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            @material-ui/styles
+          </BoxStyles>
+        </StylesThemeProvider>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/box-styled-components/index.js b/benchmark/scenarios/box-styled-components/index.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { styleFunction } from '@material-ui/core/Box';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { logReactMetrics } from '../utils';
+
+const materialSystemTheme = createMuiTheme();
+const BoxStyleComponents = styledComponents('div')(styleFunction);
+
+export default function BoxStyledComponents() {
+  return (
+    <React.Profiler id="box-styled-components" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <StyledComponentsThemeProvider theme={materialSystemTheme}>
+          <BoxStyleComponents
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            styled-components
+          </BoxStyleComponents>
+        </StyledComponentsThemeProvider>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/material-ui-system-all-inclusive/index.js b/benchmark/scenarios/material-ui-system-all-inclusive/index.js
@@ -0,0 +1,17 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+import { styleFunction } from '@material-ui/core/Box';
+
+const materialSystemTheme = createMuiTheme();
+
+export default function MaterialUISystemAllInclusive() {
+  styleFunction({
+    theme: materialSystemTheme,
+    color: 'primary.main',
+    bgcolor: 'background.paper',
+    fontFamily: 'h6.fontFamily',
+    fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'],
+    p: [2, 3, 4],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/material-ui-system-colors/index.js b/benchmark/scenarios/material-ui-system-colors/index.js
@@ -0,0 +1,10 @@
+import { palette } from '@material-ui/system';
+
+export default function MaterialUISystemColors() {
+  palette({
+    theme: {},
+    bgcolor: ['red', 'blue'],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/material-ui-system-compose/index.js b/benchmark/scenarios/material-ui-system-compose/index.js
@@ -0,0 +1,18 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+import { spacing, palette, typography, compose } from '@material-ui/system';
+
+const materialSystem = compose(palette, spacing, typography);
+const materialSystemTheme = createMuiTheme();
+
+export default function MaterialUISystemCompose() {
+  materialSystem({
+    theme: materialSystemTheme,
+    color: 'primary.main',
+    bgcolor: 'background.paper',
+    fontFamily: 'h6.fontFamily',
+    fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'],
+    p: [2, 3, 4],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/material-ui-system-spaces/index.js b/benchmark/scenarios/material-ui-system-spaces/index.js
@@ -0,0 +1,10 @@
+import { spacing } from '@material-ui/system';
+
+export default function MaterialUISystemSpaces() {
+  spacing({
+    theme: {},
+    p: [1, 2, 3],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/naked-styled-components/index.js b/benchmark/scenarios/naked-styled-components/index.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { spacing } from '@material-ui/system';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { logReactMetrics } from '../utils';
+
+const materialSystemTheme = createMuiTheme();
+const NakedStyleComponents = styledComponents('div')(spacing);
+
+export default function NakedStyledComponents() {
+  return (
+    <React.Profiler id="naked-styled-components" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <StyledComponentsThemeProvider theme={materialSystemTheme}>
+          <NakedStyleComponents
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            styled-components
+          </NakedStyleComponents>
+        </StyledComponentsThemeProvider>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/noop/index.js b/benchmark/scenarios/noop/index.js
@@ -0,0 +1,3 @@
+export default function Noop() {
+  return null;
+}
diff --git a/benchmark/scenarios/styled-components-box-material-ui-system/index.js b/benchmark/scenarios/styled-components-box-material-ui-system/index.js
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { spacing, palette, typography, compose } from '@material-ui/system';
+import { logReactMetrics } from '../utils';
+
+const materialSystem = compose(palette, spacing, typography);
+const materialSystemTheme = createMuiTheme();
+const BoxMaterialSystem = styledComponents('div')(materialSystem);
+
+export default function StyledComponentsBoxMaterialUISystem() {
+  return (
+    <React.Profiler id="styled-components-box-material-ui-system" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <StyledComponentsThemeProvider theme={materialSystemTheme}>
+          <BoxMaterialSystem
+            color="primary.main"
+            bgcolor="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            @material-ui/system
+          </BoxMaterialSystem>
+        </StyledComponentsThemeProvider>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/styled-components-box-styled-system/index.js b/benchmark/scenarios/styled-components-box-styled-system/index.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createMuiTheme } from '@material-ui/core/styles';
+import styledComponents, {
+  ThemeProvider as StyledComponentsThemeProvider,
+} from 'styled-components';
+import { space, color, fontFamily, fontSize, compose } from 'styled-system';
+import { logReactMetrics } from '../utils';
+
+const styledSystem = compose(color, space, fontFamily, fontSize);
+const BoxStyledSystem = styledComponents('div')(styledSystem);
+
+const styledSystemTheme = createMuiTheme();
+styledSystemTheme.breakpoints = ['40em', '52em', '64em'];
+styledSystemTheme.colors = styledSystemTheme.palette;
+styledSystemTheme.fontSizes = styledSystemTheme.typography;
+styledSystemTheme.fonts = styledSystemTheme.typography;
+
+export default function StyledComponentsBoxStyledSystem() {
+  return (
+    <React.Profiler id="styled-components-box-styled-system" onRender={logReactMetrics}>
+      {new Array(1000).fill().map(() => (
+        <StyledComponentsThemeProvider theme={styledSystemTheme}>
+          <BoxStyledSystem
+            color="primary.main"
+            bg="background.paper"
+            fontFamily="h6.fontFamily"
+            fontSize={['h6.fontSize', 'h4.fontSize', 'h3.fontSize']}
+            p={[2, 3, 4]}
+          >
+            styled-system
+          </BoxStyledSystem>
+        </StyledComponentsThemeProvider>
+      ))}
+    </React.Profiler>
+  );
+}
diff --git a/benchmark/scenarios/styled-system-colors/index.js b/benchmark/scenarios/styled-system-colors/index.js
@@ -0,0 +1,10 @@
+import { color } from 'styled-system';
+
+export default function StyledSystemColors() {
+  color({
+    theme: {},
+    bg: ['red', 'blue'],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/styled-system-compose/index.js b/benchmark/scenarios/styled-system-compose/index.js
@@ -0,0 +1,22 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+import { space, color, fontFamily, fontSize, compose } from 'styled-system';
+
+const styledSystem = compose(color, space, fontFamily, fontSize);
+const styledSystemTheme = createMuiTheme();
+styledSystemTheme.breakpoints = ['40em', '52em', '64em'];
+styledSystemTheme.colors = styledSystemTheme.palette;
+styledSystemTheme.fontSizes = styledSystemTheme.typography;
+styledSystemTheme.fonts = styledSystemTheme.typography;
+
+export default function StyledSystemCompose() {
+  styledSystem({
+    theme: styledSystemTheme,
+    color: 'primary.main',
+    bg: 'background.paper',
+    fontFamily: 'h6.fontFamily',
+    fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'],
+    p: [2, 3, 4],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/styled-system-spaces/index.js b/benchmark/scenarios/styled-system-spaces/index.js
@@ -0,0 +1,10 @@
+import { space } from 'styled-system';
+
+export default function StyledSystemSpaces() {
+  space({
+    theme: {},
+    p: [1, 2, 3],
+  });
+
+  return null;
+}
diff --git a/benchmark/scenarios/utils/index.js b/benchmark/scenarios/utils/index.js
@@ -0,0 +1,22 @@
+/* eslint-disable import/prefer-default-export */
+
+export const logReactMetrics = (
+  id, // the "id" prop of the Profiler tree that has just committed
+  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
+  actualDuration, // time spent rendering the committed update
+  baseDuration, // estimated time to render the entire subtree without memoization
+  startTime, // when React began rendering this update
+  commitTime, // when React committed this update
+  interactions, // the Set of interactions belonging to this update
+) => {
+  // eslint-disable-next-line no-console
+  console.info({
+    id,
+    phase,
+    actualDuration,
+    baseDuration,
+    startTime,
+    commitTime,
+    interactions,
+  });
+};
diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js
diff --git a/benchmark/webpack.config.js b/benchmark/webpack.config.js
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
