[core] Add a real life benchmark (#13244)

mui · Oct 14, 2018 · 24a9be1 · 24a9be1
1 parent 611c6c1
commit 24a9be1
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 1 deletion.
diff --git a/packages/material-ui-benchmark/README.md b/packages/material-ui-benchmark/README.md
@@ -1,5 +1,7 @@
 # Material-UI Benchmarking
 
+## Synthetic benchmark
+
 ```sh
 yarn benchmark
 
@@ -18,3 +20,30 @@ ButtonBase cache x 34,618 ops/sec ±12.83% (68 runs sampled)
 ButtonBase ripple x 38,715 ops/sec ±13.70% (68 runs sampled)
 ButtonBase disableRipple x 46,165 ops/sec ±13.53% (66 runs sampled)
 ```
+
+## Real life benchmark
+
+```sh
+yarn server
+
+bombardier \
+  -c 100 \
+  -l \
+  -d 60s \
+  -m GET \
+  '0.0.0.0:3001/'
+
+Statistics        Avg      Stdev        Max
+  Reqs/sec       442.47      55.44     547.63
+  Latency      225.64ms    17.11ms   471.31ms
+  Latency Distribution
+     50%   221.98ms
+     75%   230.69ms
+     90%   241.19ms
+     95%   247.87ms
+     99%   273.88ms
+  HTTP codes:
+    1xx - 0, 2xx - 26642, 3xx - 0, 4xx - 0, 5xx - 0
+    others - 0
+  Throughput:    11.61MB/s
+```
diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json
@@ -12,7 +12,8 @@
   },
   "homepage": "https://github.com/mui-org/material-ui/tree/master/packages/material-ui-benchmark",
   "scripts": {
-    "benchmark": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/benchmark.js"
+    "benchmark": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/benchmark.js",
+    "server": "cd ../../ && NODE_ENV=production BABEL_ENV=docs-production babel-node packages/material-ui-benchmark/src/server.js"
   },
   "devDependencies": {},
   "engines": {

diff --git a/packages/material-ui-benchmark/src/server.js b/packages/material-ui-benchmark/src/server.js
@@ -0,0 +1,65 @@
+/* eslint-disable no-console */
+
+import express from 'express';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { SheetsRegistry } from 'react-jss/lib/jss';
+import JssProvider from 'react-jss/lib/JssProvider';
+import {
+  MuiThemeProvider,
+  createMuiTheme,
+  createGenerateClassName,
+} from '@material-ui/core/styles';
+import green from '@material-ui/core/colors/green';
+import red from '@material-ui/core/colors/red';
+import Pricing from 'docs/src/pages/page-layout-examples/pricing/Pricing';
+
+function renderFullPage(html, css) {
+  return `
+    <!doctype html>
+    <html>
+      <head>
+        <title>Material-UI</title>
+      </head>
+      <body>
+        <div id="root">${html}</div>
+        <style id="jss-server-side">${css}</style>
+      </body>
+    </html>
+  `;
+}
+
+const sheetsCache = new Map();
+
+const theme = createMuiTheme({
+  palette: {
+    primary: green,
+    accent: red,
+    type: 'light',
+  },
+  typography: {
+    useNextVariants: true,
+  },
+});
+
+function handleRender(req, res) {
+  const sheetsRegistry = new SheetsRegistry();
+  const generateClassName = createGenerateClassName();
+  const html = ReactDOMServer.renderToString(
+    <JssProvider registry={sheetsRegistry} generateClassName={generateClassName}>
+      <MuiThemeProvider theme={theme} sheetsManager={new Map()} sheetsCache={sheetsCache}>
+        <Pricing />
+      </MuiThemeProvider>
+    </JssProvider>,
+  );
+  const css = sheetsRegistry.toString();
+  res.send(renderFullPage(html, css));
+}
+
+const app = express();
+app.use(handleRender);
+
+const port = 3001;
+app.listen(port, () => {
+  console.log(`listening on port ${port}`);
+});