Performance tests of some styling packages for react.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
results
src
.gitignore
README.md
package-lock.json
package.json
webpack.config.js

README.md

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.

Awailable scripts

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 ./results.

React scripting time test

  • Measures the time between componentWillMount and componentDidMount

To run this test you need to create the build, npm run build and open index.html file from the ./src/*package* directory. 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.

Example: ?table_size=5&repeat_times=5&measure_render_time