Performance issues with Blazor WASM

[AlmightyLks]

I have decided to port my former Blazor Server application to Blazor WASM, in case you're wondering about that, coming from our previous conversations 🙂

I am having huge performance issues:

• Rendering 520 Nodes & 519 Links takes ages
• After the initial rendering, doing anything on the Diagram is very laggy and unresponsive

https://user-images.githubusercontent.com/54688434/212504743-1ae5ff97-08e7-4abb-ba03-f7cb73834a10.mp4

Performance is very important, especially in WebAssembly.

Given the primary goal of making good use of performance in WASM, I wonder if ~0.5k nodes are supposed to bring the Diagram down on its knees 😆

[AlmightyLks]

Below is the contrast to how fast and responsive it was on Blazor Server

https://user-images.githubusercontent.com/54688434/212510024-3856d444-0ebf-41a4-94fd-965593c92be6.mp4

[zHaytam]

Hi, can you redo the WASM video but without opening the devtools? That alone makes it a lost worse

[AlmightyLks]

Interesting! That seems to be the case The initial rendering is chunks faster, but perhaps not as fast as it can or should be? 🙂 Further Rendering still suffers though

https://user-images.githubusercontent.com/54688434/212535271-2be60eba-6673-4a2b-a15d-ba3441c7c466.mp4

[zHaytam]

Of course it's very slow, is the code still in https://github.com/AlmightyLks/ForkHierarchy? I would like to check these things in details

[AlmightyLks]

Yep, code is still at that place 😄

If you want to run it and reproduce, i can give a smol rundown of the few steps

[zHaytam]

Yes please

[AlmightyLks]

• Drop the below sqlite db into the .\ForkHierarchy\Server folder (Sparing you the need of a github token, and that jazz)
• Run ForkHierarchy.Server project
• Hop over to the path /Display/15
• Hit "Render Graph" to start the initial rendering

data.zip

GitHub doesnt allow me to share sqlite database files directly

Edit: In hindsight, the database is already uploaded to the github repo🤦

[zHaytam]

I've had a lot of work these days, so I will only be able to look at this in the weekend, sorry

[AlmightyLks]

All good; Your Library is an open source project with no liability or responsibility, nor is my project commercial 😄

But thanks for the heads up

[zHaytam]

I do love this project a lot, so it's normal for me to feel excited when someone uses it, so I owe it to you to at least explain when things are slow 😄

[314159265meow]

What I also noticed in tests is that not only the DevTools make it much slower, but also Visual Studio itself. Using a published Release Version sometimes halved the time for calculation heavy code, e.g. creating and setting up 500 Nodes for the diagram (my test case a few days ago). You can also try AOT compilation, I had mixed results with that, sometimes no impact, sometimes further speedup.

https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0#ahead-of-time-aot-compilation

[AlmightyLks]

I will be updating to the pre-release 3.0 version, to not bother you having to debug an old version youre not working on

[AlmightyLks]

What I also noticed in tests is that not only the DevTools make it much slower, but also Visual Studio itself. Using a published Release Version sometimes halved the time for calculation heavy code, e.g. creating and setting up 500 Nodes for the diagram (my test case a few days ago). You can also try AOT compilation, I had mixed results with that, sometimes no impact, sometimes further speedup.

https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0#ahead-of-time-aot-compilation

I just tried that, deploying as release and running it directly on localhost; Same result for this case 😄

[AlmightyLks]

Mind giving me an insight on what you know and/or suspect to be the current troublemarkers in regards to performance? (as you were looking into with #217 )

[zHaytam]

I am still looking at your issue specifically, but generally speaking since we need to find the position of the ports inside the nodes and lot of stuff that requires JS initially, it ends up taking a lot of time because of JSInterop. I am trying to see if there is a global solution (or at least one for your case), but in order for me to avoid using JS I am required to know nodes and ports and their positions, which is only possible for certain cases.

For example, if you have a node with fixed size, you can use portless links with an anchor at top/bottom positions, this removes the need for all the JS calls I do now and should make a lot of use cases fast. Down side is, there are no ports so you can't see them (duh) and drag new links etc. (although you can use the new drag new link hover control)