ryohey / react-canvas-perf

Performance comparison for rendering many elements in React.js with canvas

React.js Canvas Rendering Performance Test

Performance comparison for rendering many elements in React.js with canvas

Renderers

• @inlet/react-pixi
• react-pixi-fiber
• 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