Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add React benchmarking infrastructure (#9465)
* Initial commit for WIP benchmarking infrastructure * fixed lint issues and ran prettier * added <rootDir>/scripts/bench/ to ignore paths for Jest * tidied up code and fixed a few bugs in the runner.js * fixed eslint * improved the benchmark output from the runner * fixed typo * tided up print output in runner.js * throw error if chrome canary is not installed on mac * added better bench stats output (tables) * added benchmark diff to table results * adds bundle size comparisons to results * tidied up the results * fixed prettier output * attempt to trigger bech for circleci build * fixes flow exlclusion for lighthouse module * added class components benchmark * cleaned up stats.js * stability changes * circleci node version to 7 * added another benchmark * added colours to the different benchmarks to check if being cached * force no-cache headers * added more info messages * refactor chrome launching. * fixed an issue where launcher.kill might fail * Move server to runner. Launch it only once. * tidy up * changes the logic in how the remote repo is checked out * removes bench from circleci build * removed colors from benchmarks (no longer needed) * added CI integration comment * added hacker news benchmark * added skipBuild functionality * relabelled remote * Add confidence intervals * added first meaningful paint * removed some unused code * reverted code.json * updated benchmark runs back to 10 * no longer breaks when results contain missing bundles * adds CPU throttling * renamed build to remote-repo * small fix to build * fixed bad merge * upped runs to 10 from 2 again * properly pulls master * removes old-bench * runs benchmarks in headless mode * adds a --headless option * improved the git build process * added README * updated based feedback from review * adds merge base commit sha * addressing more PR feedback * remove built JS react files * updated .gitignore * added combined bundle load times to the metrics
- Loading branch information
Showing
38 changed files
with
7,394 additions
and
10,624 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,41 @@ | ||
| Work-in-progress benchmarks. | ||
| # React Benchmarking | ||
|
|
||
| ## Running the suite | ||
| ## Commands | ||
|
|
||
| You'll need two folders to compare, each of them containing `react.min.js` and `react-dom-server.min.js`. You can run `npm run build` at the repo root to get a `build` folder with these files. | ||
| In most cases, the only two commands you might want to use are: | ||
|
|
||
| For example, if you want to compare a stable verion against master, you can create folders called `build-stable` and `build-master` and use the benchmark scripts like this: | ||
| - `yarn bench` | ||
| - `yarn build -- --type=UMD_PROD && yarn bench -- --skip-build` | ||
|
|
||
| ``` | ||
| $ ./measure.py build-stable stable.txt build-master master.txt | ||
| $ ./analyze.py stable.txt master.txt | ||
| ``` | ||
| The first command will run benchmarks with all the default settings. A local and remote build will occcur on all bundles, both local and remote repos will be run against all benchmarks. | ||
|
|
||
| The test measurements (second argument to `analyze`, `master.txt` in this example) will be compared to the control measurements (first argument to `analyze`, `stable.txt` in this example). | ||
| The second command will run all benchmarks but skip the build process. This is useful for when doing local performance tweaking and the remote repo has already had its bundles built. Bboth local and remote repos will be run against all benchmarks with this command too. | ||
|
|
||
| Changes with the `-` sign in the output mean `master` is faster than `stable`. | ||
| The other commands are as follows: | ||
|
|
||
| You can name folders any way you like, this was just an example. | ||
| ```bash | ||
| # will compare local repo vs remote merge base repo | ||
| yarn bench | ||
|
|
||
| ## Running one | ||
| One thing you can do with them is benchmark initial render time for a realistic hierarchy: | ||
| # will compare local repo vs remote merge base repo | ||
| # this can significantly improve bench times due to no build | ||
| yarn bench -- --skip-build | ||
|
|
||
| ``` | ||
| $ which jsc | ||
| /System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Resources/jsc | ||
| $ jsc react-0.14.0.min.js bench-pe-es5.js -e 'var START=Date.now(); React.renderToString(React.createElement(Benchmark)); var END=Date.now(); print(END-START);' | ||
| 45 | ||
| ``` | ||
| # will only build and run local repo against benchmarks (no remote values will be shown) | ||
| yarn bench -- --local | ||
|
|
||
| Substitute `js` or `v8` for `jsc` to use SpiderMonkey or V8, respectively, if you've installed them. | ||
| # will only build and run remote merge base repo against benchmarks (no local values will be shown) | ||
| yarn bench -- --remote | ||
|
|
||
| ## Creating one | ||
| # will only build and run remote master repo against benchmarks | ||
| yarn bench -- --remote=master | ||
|
|
||
| To create one, copy `extract-component.js` to your clipboard and paste it into the Chrome console on facebook.com, perhaps after changing the root ID if you don't want the tree with ID `.0`. | ||
| # same as "yarn bench" | ||
| yarn bench -- --remote --local | ||
|
|
||
| Then to convert it to ES5: | ||
| # runs benchmarks with Chrome in headless mode | ||
| yarn bench -- --headless | ||
|
|
||
| ``` | ||
| babel --whitelist react,react.displayName --compact false bench-pe.js >bench-pe-es5.js | ||
| ``` | ||
| # runs only specific string matching benchmarks | ||
| yarn bench -- --benchmark=hacker | ||
| ``` |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.