https://github.com/ryohey/react-canvas-perf
Performance comparison for rendering many elements in React.js with canvas
https://github.com/ryohey/react-canvas-perf
react react-pixi react-pixi-fiber
Last synced: about 1 month ago
JSON representation
Performance comparison for rendering many elements in React.js with canvas
- Host: GitHub
- URL: https://github.com/ryohey/react-canvas-perf
- Owner: ryohey
- Created: 2021-02-11T10:22:33.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-11T10:31:38.000Z (over 5 years ago)
- Last Synced: 2025-03-15T22:13:02.205Z (about 1 year ago)
- Topics: react, react-pixi, react-pixi-fiber
- Language: TypeScript
- Homepage: https://ryohey.github.io/react-canvas-perf/
- Size: 1.68 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React.js Canvas Rendering Performance Test
Performance comparison for rendering many elements in React.js with canvas
## Renderers
- [@inlet/react-pixi](https://github.com/inlet/react-pixi)
- [react-pixi-fiber](https://github.com/michalochman/react-pixi-fiber)
- [react-konva](https://github.com/konvajs/react-konva)
- pixi.js without library
- `div` with CSS
- `svg`
## Test
### Environment
MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)
- Intel Core i7 3.5GHz
- 16GB
- Render 1000 items
### Result (production build)
| Renderer | FPS | FPS (no text) |
| ----------------------- | --- | ------------- |
| @inlet/react-pixi | 6 | 38 |
| react-pixi-fiber | 6 | 48 |
| react-konva | 9 | 26 |
| pixi.js without library | 31 | 32 |
| div | 29 | 32 |
| svg | 7 | 39 |
### Result (development build)
| Renderer | FPS | FPS (no text) |
| ----------------------- | --- | ------------- |
| @inlet/react-pixi | 6 | 31 |
| react-pixi-fiber | 5 | 37 |
| react-konva | 8 | 18 |
| pixi.js without library | 38 | 40 |
| div | 16 | 17 |
| svg | 7 | 21 |