https://github.com/michaeljscript/styling-react
Performance tests of some styling packages for react.
https://github.com/michaeljscript/styling-react
Last synced: 5 months ago
JSON representation
Performance tests of some styling packages for react.
- Host: GitHub
- URL: https://github.com/michaeljscript/styling-react
- Owner: michaeljscript
- Created: 2017-08-30T14:01:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-29T13:52:34.000Z (over 8 years ago)
- Last Synced: 2024-01-28T18:20:57.928Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 675 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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