diff --git a/benchmark/index.js b/benchmark/index.js index 0e33ac23fb57f5..e30c8718f0fb78 100644 --- a/benchmark/index.js +++ b/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(, 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
{props.children}
; +} + +TestCase.propTypes = { + children: PropTypes.node, +}; + +ReactDOM.render( + + + , + rootEl, +); diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js index 20c3a3e7da4afd..794ff241e2d60a 100644 --- a/benchmark/scripts/benchmark.js +++ b/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);