HTML5 Canvas All Konva performance tips list
Don’t want to spend your time with performance issues? Request a performance review.
There is a full list of useful performance tips:
- Shape Caching
- Layer Management
- Optimize Animation
- Shape Redraw
- If your shape has only position transformation (
transformsEnabled = 'position'
- If you don’t need event on layer set
layer.hitGraphEnabled(false). Or use Konva.FastLayer. See Demo
- For mobile application set viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- If you have bad performance on retina devices set
Konva.pixelRatio = 1. Make sure that quality of result is ok for you.
- While dragging a node you can move it on separate layer. Then move it back to original layer. See Demo
- Optimize Stroke Drawing
- If a shape has fill, stroke and opacity you may set
shape.perfectDrawEnabled(false). See demo for more information Disable Perfect Drawing.
- Try to set
shape.listening(false)where possible. For more info read Listening false.
- Avoid Memory Leaks.
- Don’t create large stages. Try to make canvases as small, as possible. 8000px wide canvas is blah 🤢. use this tip instead
- Do not create too many layers. Usually 3-5 is max.
- Hide (or remove from layer) invisible objects (or objects that go out of the screen).