Benchmarking state usage tracking and other related projects
dai-shi opened this issue · comments
Continuing from #3:
At this point, we only use js-framework-benchmark, but it would be nice to try with react-redux-benchmarks.
https://github.com/dai-shi/js-framework-benchmark/tree/f7e8f446ed2ecc43ac7587684b74451bb11a0cc9
Re-run with reactive-react-redux v4.1.0 and react-tracked v0.7.0.
Here's the latest react-redux-benchmarks results. https://github.com/dai-shi/react-redux-benchmarks/tree/d504624c159958aab5d0a47e9555872be010f2da.
Raw output
$ node ./runBenchmarks.js
Running benchmark deeptree
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark deeptree:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 23.12 │ 118.7, 0.1 │ 19747.24 │ 6009.08 │ 2371.71 │ 22,24,22,25,24,23,26,23,24,23,24,25,26,25,20,17,19,18,19,19 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 14.11 │ 90.8, 4.5 │ 24127.39 │ 3362.54 │ 1366.11 │ 14,13,14,15,14,13,14,15,14,15,14,14 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 41.72 │ 107.7, 0.6 │ 10367.16 │ 10305.98 │ 5719.96 │ 51,55,54,55,52,56,54,55,53,54,43,33,32,31,33,32,22,23,22,23,23 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 44.61 │ 82.4, 0.5 │ 9690.65 │ 10776.30 │ 5909.30 │ 57,59,57,59,60,59,55,60,59,42,34,33,35,28,24,25,23,24,24 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 44.56 │ 72.9, 0.7 │ 9506.13 │ 10813.97 │ 6015.37 │ 56,58,59,58,57,60,59,60,59,58,42,35,34,33,30,23,24,22,24,24 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 39.98 │ 81.1, 1.0 │ 9950.90 │ 10477.39 │ 5857.69 │ 44,45,34,33,38,52,54,58,56,53,54,47,32,33,32,34,32,25,31,32,25,23,19,19 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────┘
Running benchmark deeptree-nested
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark deeptree-nested:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬───────────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 51.14 │ 179.8, 0.7 │ 7196.08 │ 4557.65 │ 1783.12 │ 57,58,55,56,57,56,55,54,55,53,55,53,46,44,45,46,48,46,44,42,45,43,45,42,42 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 17.03 │ 130.3, 6.3 │ 20360.52 │ 3719.39 │ 824.22 │ 19,18,19,20,21,20,23,21,18,20,19,14,15,14,15,13,14,12,13,12,14,14 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 52.22 │ 142.2, 0.4 │ 6322.56 │ 4484.55 │ 1793.23 │ 58,59,58,59,58,57,56,54,57,55,54,48,49,44,46,48,45,49,45,44,43,46,42,43,43 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 52.59 │ 103.5, 0.4 │ 5315.03 │ 4532.30 │ 1817.59 │ 58,60,57,59,58,59,58,55,57,56,54,57,55,57,50,48,49,50,46,50,48,46,43,48,45,45 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 52.99 │ 105.4, 1.4 │ 5082.65 │ 4480.35 │ 1824.95 │ 58,59,58,59,58,57,58,56,55,56,55,57,56,55,51,46,49,50,48,47,44,48,47,46,45,45 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼───────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 53.08 │ 120.5, 1.2 │ 4711.62 │ 4485.96 │ 1809.16 │ 58,59,58,56,57,56,57,55,47,50,49,50,49,45,43,48,47,47 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴───────────────────────────────────────────────────────────────────────────────┘
Running benchmark forms
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark forms:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 57.21 │ 962.3, 0.2 │ 6015.14 │ 1046.54 │ 2847.59 │ 56,57,58,57,58,57,58,57,58,57,58,56,57,59,58,56,58,57,55,56,58,55,55 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 55.46 │ 944.8, 1.9 │ 11619.02 │ 861.48 │ 2261.33 │ 56,54,57,54,56,55,54,56,55,53,55,53,58,55,58,57,55,56,53,57,56,55,57,56,55,57,56,56 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 57.18 │ 942.4, 0.3 │ 6350.89 │ 937.68 │ 2566.82 │ 56,58,57,58,57,58,57,58,57,56,60,58,53,58,57,58,57,57 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 57.42 │ 971.6, 0.2 │ 5206.20 │ 1040.26 │ 2810.55 │ 56,57,58,57,58,57,60,57,58,57,58,57,58,56,59,58,57,58,58 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 57.53 │ 950.1, 0.4 │ 5243.96 │ 975.52 │ 2667.12 │ 56,57,58,57,58,57,58,57,58,60,58,56,58,57,58,57,58,57,58,58 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 57.50 │ 968.3, 0.6 │ 5976.38 │ 1100.85 │ 2845.86 │ 57,56,58,57,58,57,58,57,59,57,58,57,58,57,59,57,58,57,57 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark stockticker
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark stockticker:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 59.20 │ 178.3, 0.4 │ 13861.48 │ 10625.63 │ 3613.06 │ 53,60,59,60,59,60,59,60,58,60,59,60,59,60,59,60,59,60,59,60,59,60,60 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 21.41 │ 170.9, 5.1 │ 23188.04 │ 4479.60 │ 1334.57 │ 22,23,22,21,22,21,22,21,20,21,20,20 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 55.11 │ 241.0, 0.3 │ 14093.91 │ 10291.27 │ 3461.91 │ 53,58,59,56,59,57,56,58,55,57,59,56,55,56,31,49,50,57,55,57,55,53,54,54 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 59.24 │ 153.1, 0.4 │ 10222.92 │ 12621.06 │ 4165.74 │ 57,59,60,59,60,59,60,59,60,59,60,59,60,59,60,59,59 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 59.23 │ 136.3, 1.7 │ 11838.46 │ 11729.19 │ 4013.76 │ 56,60,59,60,59,60,59,60,59,60,59,60,59,60,59,60,59,60,58,59,58,60,60 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 55.56 │ 161.1, 2.5 │ 13776.99 │ 10417.79 │ 3605.89 │ 54,60,59,60,59,60,58,59,57,55,58,60,58,55,52,54,52,51,48,51,52,51,50,50 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────┘
Running benchmark tree-view
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark tree-view:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬─────────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 51.39 │ 501.5, 0.2 │ 7906.98 │ 8081.01 │ 595.82 │ 48,51,56,43,49,50,53,47,51,53,52,49,51,52,58,50,55,50,48,56,51,53,53 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 40.85 │ 487.2, 17.2 │ 18761.17 │ 4396.43 │ 300.58 │ 44,39,41,43,45,34,39,41,39,40,39,40,43,44,46,38,43,42,35,45,43,40,45,40,36,40,42,42 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 52.08 │ 549.0, 0.2 │ 7831.28 │ 8387.32 │ 612.22 │ 52,53,54,47,48,52,49,54,47,56,53,50,52,48,56,52,53,55,51,52,56,54,53,51,51 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 50.85 │ 415.0, 1.0 │ 6019.33 │ 8260.46 │ 639.90 │ 43,53,54,46,43,50,55,52,54,48,54,49,50,51,47,57,53,55,54,49,50,55,51,46,52,54,54 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 50.50 │ 419.1, 2.6 │ 5668.93 │ 8703.02 │ 643.78 │ 45,51,46,42,52,47,54,48,50,53,50,45,51,49,57,55,53,50,53,55,47,44,50,53,53 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼─────────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 50.27 │ 475.2, 5.2 │ 7559.43 │ 8263.97 │ 612.24 │ 42,50,51,47,48,51,48,53,56,40,53,49,51,47,52,47,57,54,55,54,50,51,53,50,46,53,53 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴─────────────────────────────────────────────────────────────────────────────────────┘
Running benchmark twitter-lite
react-redux type-version: connect-5.1.1
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-6.0.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: connect-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-7.1.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useSelector-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
react-redux type-version: useTrackedState-rrr-4.2.0
Checking max FPS... (30 seconds)
Running trace... (30 seconds)
Results for benchmark twitter-lite:
┌───────────────────────────┬─────────┬──────────────┬───────────┬───────────┬──────────┬──────────────────────────────────────────────────────────────────────────────────┐
│ Type-Version │ Avg FPS │ Render │ Scripting │ Rendering │ Painting │ FPS Values │
│ │ │ (Mount, Avg) │ │ │ │ │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-5.1.1 │ 50.55 │ 3.7, 0.5 │ 20439.70 │ 3665.49 │ 673.92 │ 60,59,60,59,60,59,58,57,59,58,55,52,47,40,39,35,36,31,32,32 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-6.0.0 │ 29.86 │ 2.8, 5.1 │ 26799.24 │ 1429.80 │ 327.82 │ 59,60,59,53,47,41,36,32,30,27,26,23,22,20,19,20,18,17,18,16,18,16,15,15 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ connect-7.1.0 │ 50.77 │ 3.8, 0.2 │ 19874.18 │ 3766.76 │ 688.27 │ 60,59,60,59,60,59,58,57,60,58,60,56,59,58,57,54,48,43,40,42,40,37,33,34,30,29,29 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-7.1.0 │ 58.46 │ 3.1, 0.5 │ 14830.42 │ 5085.72 │ 877.47 │ 60,59,60,59,60,59,60,59,60,59,60,58,59,58,57,56,60,59,57,56,50,50 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useSelector-rrr-4.2.0 │ 58.02 │ 2.4, 2.5 │ 14641.09 │ 5089.34 │ 897.07 │ 59,60,59,60,59,60,59,60,59,60,59,60,59,56,58,54,57,58,59,56,57,54,52,52 │
├───────────────────────────┼─────────┼──────────────┼───────────┼───────────┼──────────┼──────────────────────────────────────────────────────────────────────────────────┤
│ useTrackedState-rrr-4.2.0 │ 58.87 │ 2.9, 2.0 │ 13127.55 │ 5353.57 │ 935.13 │ 59,60,59,60,59,60,59,60,59,60,59,60,59,58,60,58,56,60,58,60,57,59,56,59,57,57 │
└───────────────────────────┴─────────┴──────────────┴───────────┴───────────┴──────────┴──────────────────────────────────────────────────────────────────────────────────┘
✨ Done in 2713.90s.
| Benchmark name | Avg FPS | |||
|---|---|---|---|---|
| RR 7.1.0 connect | RR 7.1.0 useSelector | RRR 4.2.0 useSelector | RRR 4.2.0 useTrackedState | |
| deeptree | 41.72 | 44.61 | 44.56 | 39.98 |
| deeptree-nested | 52.22 | 52.59 | 52.99 | 53.08 |
| forms | 57.18 | 57.42 | 57.53 | 57.50 |
| stockticker | 55.11 | 59.24 | 59.23 | 55.56 |
| tree-view | 52.08 | 50.85 | 50.50 | 50.27 |
| twitter-lite | 50.77 | 58.46 | 58.02 | 58.87 |
copying the result from dai-shi/react-tracked#1 (comment)
Just wondering about a “classical” React-redux as a base line (and as a potential target for beautiful-react-redux)
I’ve once done it. #3 (comment)
Is this what you mean?