reduxjs / react-redux-benchmarks Goto Github PK
View Code? Open in Web Editor NEWPerformance benchmark harness for React-Redux
License: MIT License
react-redux-benchmarks's People
Contributors
Stargazers
Watchers
Forkers
avi98 taranvohra codedavinci dai-shi glenjamin janpolacek javascriptit salvoravida ctrlplusb gnoff mariusandra josepot basavarajk vhari9 mygithubfork whz-webdev specialforce342 dmitrybv grumdreact-redux-benchmarks's Issues
Add more benchmark apps
We can start adding more benchmark apps now.
Pasting some other benchmark-ish repos that are worth investigating and potentially porting:
https://github.com/mweststrate/redux-todomvc
https://github.com/jscriptcoder/stressing-redux
https://github.com/somebody32/high-performance-redux/tree/gh-pages/assets
https://github.com/coderitual/redux-performance
reduxjs/react-redux#686 (comment)
https://github.com/Kalkut/redux-data-frequency-benchmark
Also, we should look at writing some more "real-world" benchmarks, not just FPS stress tests, but that may depend on figuring out what other metrics we want to measure (#3 ).
Tweak benchmark setup scripts
Couple things I noticed using the repo this evening:
- The setup script always tries to reinstall all dependencies every time
- There doesn't seem to be a way to rebuild just one benchmark easily, particularly because the setup script and folder structure involves copying the built benchmark over to multiple folders
It would be helpful if things were split up a bit so that we could:
- Rebuild benchmarks without reinstalling all dependencies
- Rebuild only a single benchmark at a time
I think the "single benchmark build + copy and rename React-Redux files" approach I originally had might make this work better.
Port existing benchmark logic
Since reduxjs/react-redux#1008 was reverted, we should start out by copying the entire benchmarks folder over to the root of this repo to start off.
Make existing benchmarks more realistic
The stockticker and twitter-lite benchmarks currently use an array for the root of the Redux state "tree", rather than an object with multiple slices. This is rather unrealistic. The tree-view example at least uses an object, although it's all just a single normalized lookup table rather than multiple slices too.
I'd really like it if these benchmarks were modified to separate the data into state slices. Using the stockticker benchmark as an example:
Right now, it's a single array of N entries, where N is defined in constants.js. I'd like to have a NUMBER_OF_SLICES constant that defines how many named state slices that should be split into. For example:
const NUMBER_OF_SLICES = 4;
const rootReducer = createRootReducer(NUMBER_OF_SLICES);
const exampleRootState = rootReducer(undefined, {type : "@@redux/init"});
console.log(exampleRootState);
// {slice1 : [], slice2 : [], slice3 : [], slice4 : [] }With each of those slices having an equal number of items inside.
That way, the update patterns would be a bit more realistic - an update to state.slice2[123] would leave slices 1, 3, and 4 untouched.
This would require:
- Altering the reducer logic to dynamically generate slices during reducer setup
- Altering the root component(s) to do the same kind of work for each top-level slice (example: "render all stock ticker entries for
state.slice, then forstate.slice2", etc) - Passing down both a state slice name and an ID as props to the connected components so they know how to grab their own state if they're connected
Overall, I think this would give us some more realistic results.
Do some hand-profiling with React 16.5
The React DevTools have been updated with the new profiling capabilities, but they require a release of React that implements the interaction tracking backend to make those functional. React 16.5 should be out tomorrow with that included. We should start using that to do some investigation of the different builds. (We'd probably want to change the behavior so they don't automatically keep updating as we're viewing, or maybe we just snapshot a short time period and then inspect the results.)
Investigate using the speedracer library to run benchmarks
Over in reduxjs/react-redux#983, @sebinsua pointed to https://github.com/speedracer/speedracer as a relevant tool for running benchmarks like this and reporting results. It looks very interesting, but also seems lacking in soem capabilities we would want. Worth investigating, though - maybe we could either push some updates to it, or fork it.
Related: I'd really like to see some +- changes in metrics calculated automatically somehow.
react.production.min.js is broken
react-redux-benchmarks/copy-to-public/react.production.min.js
Lines 1 to 5 in 535f498
from: #7 (comment)
Results?
It would be awesome to have some sample results in this repo!
Come up with more metrics to measure
Right now we're only measure FPS, plus the values from a Chrome trace (time spent "scripting", "rendering", and "painting"). These are better than nothing, but they seem insufficient. In particular, they really only start changing if the app is continuously updating in a stress test scenario (ie, dispatching actions every few milliseconds).
It would be good to start figuring out what other metrics we might want to measure, and how we should try measuring them.
Also, the "average FPS" metric is presumably a bit flawed, because it only shows the changes, not exactly how long we spent at a given FPS rate. If we spent 20 seconds at 60 FPS and 10 seconds at 50 FPS, the average FPS isn't 55, it's ( (60 * 20 + 10 * 50) / 30), or something like that. The current math is passable enough for now, but it'd be nice if we actually used the timestamps from the performance.measure() calls to calculate a more accurate FPS result.
How to interpret results
Stumbled upon this repo from another issue regarding performance. Are all the numbers given in the results a case of "higher equals better"?
I'm only seeing one test where 7.x.x has a noticeably higher FPS than 5.1.1, and in that test the Rendering and Painting are almost double that of the 5.x branch:
Results for benchmark deeptree:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬───────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 26.75 │ 85.5, 0.0 │ 19281.85 │ 6086.22 │ 2623.57 │ 29,28,29,28,30,29,30,29,28,29,30,26,30,29,22,20,21,22,21,21 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 38.74 │ 88.8, 0.7 │ 11231.71 │ 10097.66 │ 5266.58 │ 47,48,49,48,47,46,48,51,48,47,49,48,32,30,29,30,29,30,28,22,21,21 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 39.10 │ 91.2, 0.7 │ 10761.48 │ 10388.26 │ 5384.12 │ 48,47,49,47,48,47,50,48,47,49,53,50,32,30,31,30,31,26,23,22,22 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴───────────────────────────────────────────────────────────────────┘
Results for benchmark deeptree-nested:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 50.36 │ 119.1, 0.7 │ 7285.74 │ 4771.70 │ 1887.01 │ 57,58,55,56,53,58,53,56,53,55,51,55,53,51,47,46,48,45,44,46,44,45,42,42 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 51.06 │ 129.7, 0.4 │ 6303.15 │ 4709.64 │ 1898.34 │ 58,57,58,57,58,56,54,55,53,55,58,54,53,49,44,46,43,46,42,45,43,45,46,42,43,43 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 50.20 │ 133.6, 0.4 │ 6235.70 │ 4756.41 │ 1943.68 │ 57,59,58,59,55,53,54,53,54,53,52,42,45,39,48,44,46,41,43,40,42,42 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴───────────────────────────────────────────────────────────────────────────────┘
Results for benchmark forms:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 56.78 │ 923.9, 0.2 │ 5915.98 │ 934.36 │ 2742.27 │ 56,58,57,56,57,56,57,56,57,59,57,58,56,55,58,57,58,55,57,55,58,57,55,57,57 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 56.76 │ 931.7, 0.3 │ 6447.71 │ 976.76 │ 2791.47 │ 57,56,57,58,57,60,57,56,57,58,57,56,53,57,56,57,54,57,56,56 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 56.70 │ 981.6, 0.3 │ 6004.13 │ 952.90 │ 2794.42 │ 58,57,58,57,56,57,56,57,59,57,55,57,56,54,58,57,56,58,55,58,54,56,58,58 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴────────────────────────────────────────────────────────────────────────────┘
Results for benchmark stockticker:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 51.34 │ 174.1, 0.4 │ 13648.97 │ 10923.47 │ 3656.67 │ 49,52,53,54,50,53,52,54,50,51,53,51,50,53,50,52,54,51,49,51,48,51,52,49,49 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 47.86 │ 207.5, 0.3 │ 14448.75 │ 10227.66 │ 3329.61 │ 47,48,50,49,47,48,50,48,49,48,47,48,46,48,47,48,47,48,48 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 47.80 │ 213.9, 0.3 │ 14484.82 │ 10180.31 │ 3339.40 │ 48,50,49,46,49,50,48,51,48,47,49,48,47,46,48,46,47,46,47,47 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴────────────────────────────────────────────────────────────────────────────┘
Results for benchmark tree-view:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 50.77 │ 463.8, 0.2 │ 7589.49 │ 9143.98 │ 610.45 │ 48,52,53,45,48,53,52,53,44,52,53,47,49,51,54,57,52,53,50,49,52,53,51,53,49,49 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 50.60 │ 531.8, 0.2 │ 7069.11 │ 9181.73 │ 615.77 │ 51,53,44,49,50,48,52,53,46,53,51,50,48,51,48,54,57,51,53,51,47,49,53,54,48,50,50 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 50.54 │ 528.7, 0.2 │ 7354.91 │ 9117.78 │ 611.24 │ 50,49,54,43,47,48,47,52,51,53,44,53,51,50,53,50,53,56,50,55,51,48,51,53,52,51,50,50 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Results for benchmark twitter-lite:
┌──────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬────────────────────────────────────────────────────────────────────────────┐
│ Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 5.1.1 │ 47.09 │ 3.4, 0.5 │ 20582.05 │ 3925.09 │ 644.44 │ 59,60,59,60,59,60,56,57,58,54,53,50,45,40,38,34,35,33,30,29,27,26,26 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.0-beta.0 │ 46.65 │ 4.1, 0.2 │ 20433.54 │ 4011.03 │ 669.47 │ 59,60,59,60,59,60,54,59,49,48,47,44,41,38,35,32,29,30,29,28,25,25 │
├──────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼────────────────────────────────────────────────────────────────────────────┤
│ 7.0.3 │ 48.81 │ 3.9, 0.2 │ 20083.80 │ 4119.01 │ 679.61 │ 59,60,59,60,59,60,59,56,59,56,54,49,47,44,41,40,36,34,36,35,34,31,30,29,29 │
└──────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴────────────────────────────────────────────────────────────────────────────┘
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.