Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

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

About

Performance tests of some styling packages for react.

Resources

Releases

No releases published

Packages

No packages published