We have a component MyComponent
implemented in both react and vue
MyComponent renders:
- Normal
h1
- Counter (using setInterval)
- And a list of 1000 random numbers
We're benchmarking three scenarios:
- Rendering React root, with N number of MyComponent (implemented in React) instances Source
- Rendering React root, with N number of MyComponent (implemented in Vue) instances, using
vuera
Source - Rendering React root, with N number of MyComponent (implemented in Vue) instances. React just renders the root divs, and then in useEffect hook they mount using
Vue#$mount
Source
To run the audits:
yarn install
yarn start
# then in the different terminal:
# requires chrome and might take about 5 minutes
RUNS_COUNT=5 yarn audit
results will be displayed in terminal, more in depth audits are in auditor/audits
directory
Average result of 10 runs (lower is better):