Search code examples
javascriptwebkonvajs

Konva bad performance 900 Paths

I tried to create a scrollable and zoomable kanvas with Konva. I only move the layer, not the stage, because lateron I want a fixed layer on the stage which inhabits some contols. Also I implemented some scroll and zoombounds with animations back to a allowed value. Everything is working quite fine, except as soon as I load my 900 paths (all cached) it gets really laggy. While testing with 4-5 everything was fine.

I created a codesandbox to see the Issue.

What is wrong with that? In my understanding the caching should create an Image from the Path, as soon as I clone the path, I should only copy the Image? So why is it performing so badly?

https://codesandbox.io/s/mystifying-pine-r1395z?file=/src/index.js

Solution

  • If you run the profiler, you will see what is slow:

    Profiler

    It is not rendering. It is calculations for drag limits. Optimize these calculations. Calling path.getClientRect() is an expensive operation. Especially for a path with many points. Cache your calculations. I updated your demo to call this function just one per object: https://codesandbox.io/s/romantic-cerf-yq0tgy?file=/src/index.js. But you can go further. Calculate just once upfront. Then use calculated size.