mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[DevTools] add perf regression test page in shell (#25078)
## Summary
This PR adds a "perf regression tests" page to react-devtools-shell.
This page is meant to be used as a performance sanity check we will run
whenever we release a new version or finish a major refactor.
Similar to other pages in the shell, this page can load the inline
version of devtools and a test react app on the same page. But this page
does not load devtools automatically like other pages. Instead, it
provides a button that allows us to load devtools on-demand, so that we
can easily compare perf numbers without devtools against the numbers
with devtools.
<img width="561" alt="image"
src="https://user-images.githubusercontent.com/1001890/184059633-e4f0852c-8464-4d94-8064-1684eee626f4.png">
As a first step, this page currently only contain one test:
mount/unmount a large subtree. This is to catch perf issues that
devtools can cause on the react applications it's running on, which was
once a bug fixed in #24863.
In the future, we plan to add:
- more test apps covering different scenarios
- perf numbers within devtools (e.g. initial load)
## How did you test this change?
In order to show this test app can actually catch the perf regression
it's aiming at, I reverted #24863 locally. Here is the result:
https://user-images.githubusercontent.com/1001890/184059214-9c9b308c-173b-4dd7-b815-46fbd7067073.mov
As shown in the video, the time it takes to unmount the large subtree
significantly increased after DevTools is loaded.
For comparison, here is how it looks like before the fix was reverted:
<img width="452" alt="image"
src="https://user-images.githubusercontent.com/1001890/184059743-0968bc7d-4ce4-42cd-b04a-f6cbc078d4f4.png">
## about the `requestAnimationFrame` method
For this test, I used `requestAnimationFrame` to catch the time when
render and commit are done. It aligns very well with the numbers
reported by Chrome DevTools performance profiling. For example, in one
run, the numbers reported by my method are
<img width="464" alt="image"
src="https://user-images.githubusercontent.com/1001890/184060228-990a4c75-f594-411a-9f85-fa5532ec8c37.png">
They are very close to the numbers reported by Chrome profiling:
<img width="456" alt="image"
src="https://user-images.githubusercontent.com/1001890/184060355-a15d1ec5-c296-4016-9c83-03e761f387e3.png">
<img width="354" alt="image"
src="https://user-images.githubusercontent.com/1001890/184060375-19029010-3aed-4a23-890e-397cdba86d9e.png">
`<Profiler>` is not able to catch this issue here.
If you are aware of a better way to do this, please kindly share with
me.
DiffTrain build for [ff9f943741](https://github.com/facebook/react/commit/ff9f943741671b6d83d732b2131d3f7e7d3c54c8)
[View git log for this commit](https://github.com/facebook/react/commits/ff9f943741671b6d83d732b2131d3f7e7d3c54c8)
This commit is contained in:
mondaychen
@@ -1 +1 @@
|
||||
c2d6552079178b36619f5dfd1ea39ae80b1d38b5
|
||||
ff9f943741671b6d83d732b2131d3f7e7d3c54c8
|
||||
|
||||
@@ -1 +1 @@
|
||||
c2d6552079178b36619f5dfd1ea39ae80b1d38b5
|
||||
ff9f943741671b6d83d732b2131d3f7e7d3c54c8
|
||||
|
||||
@@ -27,7 +27,7 @@ if (
|
||||
}
|
||||
"use strict";
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
// ATTENTION
|
||||
// When adding new symbols to this file,
|
||||
|
||||
@@ -27,7 +27,7 @@ if (
|
||||
}
|
||||
"use strict";
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
// ATTENTION
|
||||
// When adding new symbols to this file,
|
||||
|
||||
@@ -643,4 +643,4 @@ exports.useSyncExternalStore = function(
|
||||
);
|
||||
};
|
||||
exports.useTransition = useTransition;
|
||||
exports.version = "18.3.0-www-classic-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
@@ -635,4 +635,4 @@ exports.useSyncExternalStore = function(
|
||||
);
|
||||
};
|
||||
exports.useTransition = useTransition;
|
||||
exports.version = "18.3.0-www-modern-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
@@ -654,7 +654,7 @@ exports.useSyncExternalStore = function(
|
||||
);
|
||||
};
|
||||
exports.useTransition = useTransition;
|
||||
exports.version = "18.3.0-www-classic-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
||||
if (
|
||||
|
||||
@@ -646,7 +646,7 @@ exports.useSyncExternalStore = function(
|
||||
);
|
||||
};
|
||||
exports.useTransition = useTransition;
|
||||
exports.version = "18.3.0-www-modern-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
||||
if (
|
||||
|
||||
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
|
||||
return self;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
var LegacyRoot = 0;
|
||||
var ConcurrentRoot = 1;
|
||||
|
||||
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
|
||||
return self;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
var LegacyRoot = 0;
|
||||
var ConcurrentRoot = 1;
|
||||
|
||||
@@ -9796,7 +9796,7 @@ var slice = Array.prototype.slice,
|
||||
return null;
|
||||
},
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-classic-c2d655207-20230104",
|
||||
version: "18.3.0-www-classic-ff9f94374-20230104",
|
||||
rendererPackageName: "react-art"
|
||||
};
|
||||
var internals$jscomp$inline_1319 = {
|
||||
@@ -9827,7 +9827,7 @@ var internals$jscomp$inline_1319 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_1320 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
|
||||
@@ -9463,7 +9463,7 @@ var slice = Array.prototype.slice,
|
||||
return null;
|
||||
},
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-modern-c2d655207-20230104",
|
||||
version: "18.3.0-www-modern-ff9f94374-20230104",
|
||||
rendererPackageName: "react-art"
|
||||
};
|
||||
var internals$jscomp$inline_1310 = {
|
||||
@@ -9494,7 +9494,7 @@ var internals$jscomp$inline_1310 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_1311 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
|
||||
@@ -42666,7 +42666,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
function createPortal(
|
||||
children,
|
||||
|
||||
@@ -42390,7 +42390,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
function createPortal(
|
||||
children,
|
||||
|
||||
@@ -15543,7 +15543,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1751 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-classic-c2d655207-20230104",
|
||||
version: "18.3.0-www-classic-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
var internals$jscomp$inline_2136 = {
|
||||
@@ -15573,7 +15573,7 @@ var internals$jscomp$inline_2136 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_2137 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
@@ -15815,4 +15815,4 @@ exports.unstable_renderSubtreeIntoContainer = function(
|
||||
);
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
@@ -15104,7 +15104,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1719 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-modern-c2d655207-20230104",
|
||||
version: "18.3.0-www-modern-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
var internals$jscomp$inline_2111 = {
|
||||
@@ -15135,7 +15135,7 @@ var internals$jscomp$inline_2111 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_2112 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
@@ -15323,4 +15323,4 @@ exports.unstable_flushControlled = function(fn) {
|
||||
}
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
@@ -16313,7 +16313,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1825 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-classic-c2d655207-20230104",
|
||||
version: "18.3.0-www-classic-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
(function(internals) {
|
||||
@@ -16357,7 +16357,7 @@ var devToolsConfig$jscomp$inline_1825 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
});
|
||||
assign(Internals, {
|
||||
ReactBrowserEventEmitter: {
|
||||
@@ -16586,7 +16586,7 @@ exports.unstable_renderSubtreeIntoContainer = function(
|
||||
);
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
||||
if (
|
||||
|
||||
@@ -15864,7 +15864,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1793 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-modern-c2d655207-20230104",
|
||||
version: "18.3.0-www-modern-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
(function(internals) {
|
||||
@@ -15909,7 +15909,7 @@ var devToolsConfig$jscomp$inline_1793 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
});
|
||||
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
|
||||
exports.createPortal = function(children, container) {
|
||||
@@ -16084,7 +16084,7 @@ exports.unstable_flushControlled = function(fn) {
|
||||
}
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
|
||||
if (
|
||||
|
||||
@@ -19,7 +19,7 @@ if (__DEV__) {
|
||||
var React = require("react");
|
||||
var ReactDOM = require("react-dom");
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
// This refers to a WWW module.
|
||||
var warningWWW = require("warning");
|
||||
|
||||
@@ -19,7 +19,7 @@ if (__DEV__) {
|
||||
var React = require("react");
|
||||
var ReactDOM = require("react-dom");
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
// This refers to a WWW module.
|
||||
var warningWWW = require("warning");
|
||||
|
||||
@@ -3633,4 +3633,4 @@ exports.renderToString = function(children, options) {
|
||||
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
|
||||
);
|
||||
};
|
||||
exports.version = "18.3.0-www-classic-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
@@ -3546,4 +3546,4 @@ exports.renderToString = function(children, options) {
|
||||
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
|
||||
);
|
||||
};
|
||||
exports.version = "18.3.0-www-modern-c2d655207-20230104";
|
||||
exports.version = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
@@ -31191,7 +31191,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
function createPortal(
|
||||
children,
|
||||
|
||||
@@ -38479,7 +38479,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
function createPortal(
|
||||
children,
|
||||
|
||||
@@ -11328,7 +11328,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1519 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-classic-c2d655207-20230104",
|
||||
version: "18.3.0-www-classic-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
var internals$jscomp$inline_2049 = {
|
||||
@@ -11358,7 +11358,7 @@ var internals$jscomp$inline_2049 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_2050 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
@@ -14847,4 +14847,4 @@ exports.unstable_renderSubtreeIntoContainer = function(
|
||||
);
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
@@ -13960,7 +13960,7 @@ Internals.Events = [
|
||||
var devToolsConfig$jscomp$inline_1674 = {
|
||||
findFiberByHostInstance: getClosestInstanceFromNode,
|
||||
bundleType: 0,
|
||||
version: "18.3.0-www-modern-c2d655207-20230104",
|
||||
version: "18.3.0-www-modern-ff9f94374-20230104",
|
||||
rendererPackageName: "react-dom"
|
||||
};
|
||||
var internals$jscomp$inline_2074 = {
|
||||
@@ -13991,7 +13991,7 @@ var internals$jscomp$inline_2074 = {
|
||||
scheduleRoot: null,
|
||||
setRefreshHandler: null,
|
||||
getCurrentFiber: null,
|
||||
reconcilerVersion: "18.3.0-next-c2d655207-20230104"
|
||||
reconcilerVersion: "18.3.0-next-ff9f94374-20230104"
|
||||
};
|
||||
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
|
||||
var hook$jscomp$inline_2075 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
@@ -14314,4 +14314,4 @@ exports.unstable_flushControlled = function(fn) {
|
||||
}
|
||||
};
|
||||
exports.unstable_runWithPriority = runWithPriority;
|
||||
exports.version = "18.3.0-next-c2d655207-20230104";
|
||||
exports.version = "18.3.0-next-ff9f94374-20230104";
|
||||
|
||||
@@ -23890,7 +23890,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-classic-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-classic-ff9f94374-20230104";
|
||||
|
||||
var didWarnAboutNestedUpdates;
|
||||
|
||||
|
||||
@@ -23890,7 +23890,7 @@ function createFiberRoot(
|
||||
return root;
|
||||
}
|
||||
|
||||
var ReactVersion = "18.3.0-www-modern-c2d655207-20230104";
|
||||
var ReactVersion = "18.3.0-www-modern-ff9f94374-20230104";
|
||||
|
||||
var didWarnAboutNestedUpdates;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user