|
1 | | -Work-in-progress benchmarks. |
| 1 | +# React Benchmarking |
2 | 2 |
|
3 | | -## Running the suite |
| 3 | +## Commands |
4 | 4 |
|
5 | | -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. |
| 5 | +In most cases, the only two commands you might want to use are: |
6 | 6 |
|
7 | | -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: |
| 7 | +- `yarn bench` |
| 8 | +- `yarn build -- --type=UMD_PROD && yarn bench -- --skip-build` |
8 | 9 |
|
9 | | -``` |
10 | | -$ ./measure.py build-stable stable.txt build-master master.txt |
11 | | -$ ./analyze.py stable.txt master.txt |
12 | | -``` |
| 10 | +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. |
13 | 11 |
|
14 | | -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). |
| 12 | +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. |
15 | 13 |
|
16 | | -Changes with the `-` sign in the output mean `master` is faster than `stable`. |
| 14 | +The other commands are as follows: |
17 | 15 |
|
18 | | -You can name folders any way you like, this was just an example. |
| 16 | +```bash |
| 17 | +# will compare local repo vs remote merge base repo |
| 18 | +yarn bench |
19 | 19 |
|
20 | | -## Running one |
21 | | -One thing you can do with them is benchmark initial render time for a realistic hierarchy: |
| 20 | +# will compare local repo vs remote merge base repo |
| 21 | +# this can significantly improve bench times due to no build |
| 22 | +yarn bench -- --skip-build |
22 | 23 |
|
23 | | -``` |
24 | | -$ which jsc |
25 | | -/System/Library/Frameworks/JavaScriptCore.framework/Versions/Current/Resources/jsc |
26 | | -$ 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);' |
27 | | -45 |
28 | | -``` |
| 24 | +# will only build and run local repo against benchmarks (no remote values will be shown) |
| 25 | +yarn bench -- --local |
29 | 26 |
|
30 | | -Substitute `js` or `v8` for `jsc` to use SpiderMonkey or V8, respectively, if you've installed them. |
| 27 | +# will only build and run remote merge base repo against benchmarks (no local values will be shown) |
| 28 | +yarn bench -- --remote |
31 | 29 |
|
32 | | -## Creating one |
| 30 | +# will only build and run remote master repo against benchmarks |
| 31 | +yarn bench -- --remote=master |
33 | 32 |
|
34 | | -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`. |
| 33 | +# same as "yarn bench" |
| 34 | +yarn bench -- --remote --local |
35 | 35 |
|
36 | | -Then to convert it to ES5: |
| 36 | +# runs benchmarks with Chrome in headless mode |
| 37 | +yarn bench -- --headless |
37 | 38 |
|
38 | | -``` |
39 | | -babel --whitelist react,react.displayName --compact false bench-pe.js >bench-pe-es5.js |
40 | | -``` |
| 39 | +# runs only specific string matching benchmarks |
| 40 | +yarn bench -- --benchmark=hacker |
| 41 | +``` |
0 commit comments