https://github.com/tj-mc/styled-components-native-perf-reproducer
Reproduction of performance differences between styled-components/native and built-in styles.
https://github.com/tj-mc/styled-components-native-perf-reproducer
Last synced: 2 months ago
JSON representation
Reproduction of performance differences between styled-components/native and built-in styles.
- Host: GitHub
- URL: https://github.com/tj-mc/styled-components-native-perf-reproducer
- Owner: tj-mc
- Created: 2023-07-10T22:38:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-18T01:58:47.000Z (over 1 year ago)
- Last Synced: 2024-04-23T02:24:01.630Z (about 1 year ago)
- Language: JavaScript
- Size: 310 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# styled-components/native Performance Reproduction
This is a Expo App reproducer to demonstrate the performance difference between using styled-components/native, and built-in styling.
1000 items are rendered in Array.map to create work for the JS thread.
Please note, this simple benchmark is not exhaustive, and not representative of a real app.
For precise testing, we must testing in production mode, on hardware.
However, since styled-components does work at runtime to convert this back to normal styles, there will always be an overheard when compared to plain StyleSheet.create()
## Results - Styled v Native Render Time 1000 Empty Views (ms)
| | 1 | 2 | 3 | 4 | 5 | 6 | Avg | % Slowdown |
|-----------|-----|-----|-----|-----|-----|-----|-----|------------|
| Native | 289 | 281 | 286 | 296 | 280 | 268 | 283 | 0 |
| Styled v5 | 440 | 426 | 424 | 428 | 429 | 432 | 429 | 41.0 |
| Styled v6 | 400 | 404 | 401 | 395 | 404 | 400 | 400 | 34.2 |
# Reproduction Steps
1. Start the profiler by pressing Shift + M and open React Dev Tools.
2. Open profiler and hit record
3. Press the toggle button and stop recording
4. Record the time to render App.ts
5. Average the result across at least 3 runs