Merge pull request #10 from oliviertassinari/sub-ms

benchmark/index.js

@@ -1,5 +1,6 @@
 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)$/);
@@ -10,4 +11,32 @@ const scenarioSuitePath = window.location.search.replace('?', '');
 
 const Component = requirePerfScenarios(scenarioSuitePath).default;
 
-ReactDOM.render(<Component />, rootEl);
+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,
+);

benchmark/scripts/benchmark.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 /* eslint-disable no-await-in-loop */
 const puppeteer = require('puppeteer');
-const { performance } = require('perf_hooks');
 const handler = require('serve-handler');
 const http = require('http');
 
@@ -76,11 +75,11 @@ async function runMeasures(browser, testCaseName, testCase, times) {
   const measures = [];
 
   for (let i = 0; i < times; i += 1) {
-    const page = await browser.openPage(`http://localhost:${PORT}/${APP}?${testCase}`);
+    const url = `http://localhost:${PORT}/${APP}?${testCase}`;
+    const page = await browser.openPage(url);
 
     const benchmark = await page.evaluate(() => {
-      const { loadEventEnd, navigationStart } = performance.timing;
-      return loadEventEnd - navigationStart;
+      return window.timing.render;
     });
 
     measures.push(benchmark);