1

Working on a project built with react and react-konva. It's a 2d map of the warehouse. The map has lots of racks, they're basically just simple rectangles, but there are close to 20k of them. The map is very laggy. So we're now trying to optimize this map. The problem seems to be with rectangles, butr we're not sure how to approach this.

We created this sandbox with 20k konva.js basic elements and it's very bad too. We tried using caching, but it doesn't seem to work. So now we're not sure if it has something to do with library / canvas performance when there's lots of elements to render or we're just doing something dumb and don't see it.

Would anyone give us advice on what we might do? Thank you!

mindescape
  • 11
  • 1
  • Interesting project. Conceptually, the more drawing you do on the canvas the worse the performance. You are shifting a lot of bytes so there is no hiding from that. Additionally, the lib overhead is there too - it will be no worse with Konva than any other. There are a bunch of [performance tips](https://konvajs.org/docs/performance/All_Performance_Tips.html#page-title) on the Konva docs site. One of the is about avoiding drawing shapes that are entirely out of view because a hidden shape has no overhead. – Vanquished Wombat Jan 22 '21 at 15:24
  • I would recommend [profiling the react ](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to see what is the main reason slowdown is happening. I am guessing it is simply the amount of nodes rendered. – Special Character Jan 22 '21 at 17:49
  • On your application, do you always see all 20k shapes on the screen at the same time? Are they iteractable? – lavrton Jan 23 '21 at 00:05
  • How invested are you with using Konva? Using another canvas library may be a more viable option for you, if you are willing to move away from that library. See this website for a practical comparison on canvas library efficiency at drawing and animating boxes - https://benchmarks.slaylines.io/ – KaliedaRik Jan 25 '21 at 19:27
  • How did you solve the problem, did you switch to another library? – Vitaliy Demchuk Apr 04 '22 at 12:00
  • Yes would also like to know how you got it to work. I think I would have split the rects onto different layers, perhaps cached the layers then used mouse position tracking to do any UX like highlighting the rect under the mouse. Curious how you made it viable. – Vanquished Wombat Apr 04 '22 at 17:53

0 Answers0