Blazor JS Interop - What is faster, many small JS interops or fewer large ones?

76 views Asked by At

The title pretty much says it all.

I am looking to improve performance in our blazor app which does a lot of JS interoping to JS code for making use of THREE.js API. I understand that the calls have some overhead so I thought I would reduce their amount. Though by reducing the amount of calls and bundling more into fewer ones, I increase the amount of data I need to pass per call from C# -> JS which may also affect performance?

I don't really like having a lot of parameters per call, and I realized that the amount is limited to something around 5-7? At least for unmarshalled I believe. I did try creating a record in C# and populating it with my parameter values and just sending an object, but that has some performance issues in itself I believe, as this object needs to be serialized and serialized too (of course). All parameters are probably serialized, but it felt like the object had more performance cons than it had code readability pros...

We are using blazor wasm, so I aim to only use IJSInRuntime whenever I can to always call functions synchronously to furthermore reduce overhead.

So my question is, what is better, a lot of small calls or fewer ones but larger amounts of data (and parameters) per call?

Currently we have some home-made functionality giving us an API which uses Unmarshalled JS interop to send objects as key valuepairs to JS and they are stored in JS until we with separate marshalled calls, use them (using the key). This seems to be a good way, though I would even more prefer perhaps to have this separate "moving of data" integrated into the Function calls themselves rather than having to first "move data" -> get key -> call function with key -> function gets the data using key + parameters and runs. I have a minimum of three calls 4 Interop calls per JS function which need these data, as I need to create the "store" for the Data, 1 call, add data to the store using Unmarshalled functions, 1 call, call the marshalled function that uses the data, 1 call and finally, dispose of the data stored in JS, 1 call.

Suggestions on how to improve this? As mentioned, I have tried to bundle more things into larger calls to reduce the amount of roundtrips. Personally I feel JS -> C# has the most overhead or notable "lag", anyone else noticed this?

BTW we are still on .NET 6 so I cannot use the new JSImport/Export functionality yet. Soon though...

0

There are 0 answers