layers vs. groups performance

[markus2330]

On https://konvajs.org/docs/performance/All_Performance_Tips.html#Layers it says:

"Layer Management - under the hood, each Konva layer is a separate HTML5 canvas element which gives some useful capabilities, including the ability to refresh only a layer that changed and so avoid the performance cost of refreshing the entire stage. But with great power great responsibility comes, and each layer has an incremental performance overhead so we should keep the number of layers to a minimum."

We tried to reproduce and couldn't find any performance or memory overhead compared with groups using Lighthouse for up to 20 groups/layers . Is above information and the warning up to date? To which platforms/browsers does this information refer to?

Looking forward to some insight in this topic and maybe improvements in the documentation (hence I created an issue).

[lavrton]

Hello. Are you sure lighthouse is measuring that kind of performance and memory usage?

I didn't use lighthouse for a long time. But from what I remember, it is mainly focused on initial loading of the page.
It is less related to usual konva/canvas usage for "runtime" performance after page is loaded.

[markus2330]

Thx for the fast reply. Yes, you are right, we measured initial loading of the map editor. There memory even slightly decreased when we used layers instead of groups.

Can you give us some insight which kind of performance you noticed degraded? When and how was it measured? The documentation we found is not very specific about it.

[lavrton]

You can play with this demo: https://codesandbox.io/p/sandbox/performance-test-r56sn8?file=%2Findex.html%3A19%2C1

For me, the performance when useLayers = false is better.
For now, I don't see large memory usage differences. And I am not sure why because every canvas element of a layer should increase memory consumption

[markus2330]

You can play with this demo

Thank you! ❤️

For me, the performance when useLayers = false is better.

How did you measure the performance? I don't see a visual difference (circles care changing like crazy regardless of useLayers). With useLayers=true is a slightly higher CPU consumption but this could be due to e.g. better parallelism or higher frames.

Is the warning with 6 layers really justified? Did you see/measure the negative effect you warn about with the 50 layers in this demo?

[markus2330]

Ahh, with 100 layers I shortly noticed a difference, you are right, useLayers=false had noticeable faster changes of the circles in the beginning. But it was way too fast to count it manually.

Then I tried to manually count with 200 layers but in both cases I ended up with counting 30 frames in 10 seconds. But this high number of layers wouldn't matter for my application anyway. 😑

[lavrton]

What about memory usage?

[badnames]

You can play with this demo: https://codesandbox.io/p/sandbox/performance-test-r56sn8?file=%2Findex.html%3A19%2C1

Hi,

I'm another PermaplanT (the project maintained by @markus2330) contributor and just had a look at your demo.
I tried to vary the number layers/groups to see how rendering performance was affected (measured using Chromes built-in FPS-counter):

Key observations:

• There was no noticeable performance impact until ~10 layers were rendered at the same time. Since I tested this on a rather high end machine, the current console-warning seems appropriate.

• If groups were used instead, performance did not start to degrade until ~20 were displayed at the same time.

• Groups were about 21% faster than layers on average.

I did not look at memory usage in detail (yet), but there did not seem to be any significant difference.