The performance of styled React components
Performance tests of some styling packages for React.
You can read about the perofrmance tests at http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/.
The following libraries were tested: styled-components, glamorous, radium and css, sass and inline styles.
In the main directory you can run following scripts. Make sure you run
npm install after cloning this repository.
npm run build
To create a production builds for app testing packages.
npm run test:paint -- --library=*library_name*
To test the First meaningful paint with chrome and lighthouse.
Instead of *library_name* you can write any of: css, sass, inline, styled-components, glamorous and radium to start the test.
You can also use an option
--repeat-times=50 to run the tests 50 times. By default the test will run 100 times and it may take a long time.
If you are receiving error
ERR_FILE_NOT_FOUND make sure you have created your builds and not misspeled the library name.
When the test finishes you can see the results in the directory
React scripting time test
- Measures the time between
To run this test you need to create the build,
npm run build and open index.html file from the
Add "?measure_render_time" into the url to start the test.
A copy button will appear after the test finishes.
You can also use parameter table_size and repeat_times.