mirror of
https://github.com/zebrajr/react.git
synced 2025-12-06 12:20:20 +01:00
ff9f943741
## 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.
74 lines
2.1 KiB
HTML
74 lines
2.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<title>React DevTools</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
#target {
|
|
flex: 1;
|
|
border: none;
|
|
}
|
|
#devtools {
|
|
height: 400px;
|
|
max-height: 50%;
|
|
overflow: hidden;
|
|
z-index: 10000001;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
|
|
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
.optionsRow {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0.25rem;
|
|
background: aliceblue;
|
|
border-bottom: 1px solid lightblue;
|
|
box-sizing: border-box;
|
|
}
|
|
.optionsRowSpacer {
|
|
flex: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="optionsRow">
|
|
<button id="mountButton">Unmount test app</button>
|
|
<div class="optionsRowSpacer"> </div>
|
|
<span>
|
|
<a href="/multi.html">multi DevTools</a>
|
|
|
|
|
<a href="/e2e.html">e2e tests</a>
|
|
|
|
|
<a href="/e2e-regression.html">e2e regression tests</a>
|
|
|
|
|
<a href="/perf-regression.html">perf regression tests</a>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- React test app (shells/dev/app) is injected here -->
|
|
<!-- DevTools backend (shells/dev/src) is injected here -->
|
|
<!-- global "hook" is defined on the iframe's contentWindow -->
|
|
<iframe id="target"></iframe>
|
|
|
|
<!-- DevTools frontend UI (shells/dev/src) renders here -->
|
|
<div id="devtools"></div>
|
|
|
|
<!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
|
|
<!-- In DEV mode, this file is served by the Webpack dev server -->
|
|
<!-- For production builds, it's built by Webpack and uploaded from the local file system -->
|
|
<script src="dist/app-devtools.js"></script>
|
|
</body>
|
|
</html> |