1. Home
  2. Forum
  3. Blazor
  4. Slow JS.InvokeVoidAsync performance

Slow JS.InvokeVoidAsync performance

Hello,

I have been observing slow javascript interop call performance on pages with Syncfusion components.

For the testing, I am calling the bootstrap javascript collapse function from Blazor c# code.

I prepared a sample with 5 pages to demonstrate it.

First page: There is a button and a simple SFTab under the collapsible div. JS method call takes around 12 ms on my PC.

Second page: I put a grid below the same layout as on the first page. JS method call now takes around 30 ms.

Third page: I used a column template with the grid to show images (from Syncufusion examples). JS method call again is around 30 ms.
Fourth page: I used a row template within the grid. This time JS method call takes around 20 ms.
Fifth page: I put the button in each row of the grid using the row template.  JS method call jumped to around 100 ms. You start to see that the collapse animation is not smooth anymore.

And lastly Sixth page: There are no Syncfusion components at all. I created the same grid with just Html. JS method call is blazingly fast, just takes 2-3 ms at all.

As you see, when SyncFusion components are used on a page, the JS interop call is dramatically getting slower. Why does it cause this? Is there a workaround?


Attachment: BlazorWebJsCall_faaf30ee.zip

4 Replies
AH Ahmet July 19, 2021 09:10 AM UTC

Hi,

Did anyone have a chance to look at it?

Thanks.


VN Vignesh Natarajan Syncfusion Team July 19, 2021 11:13 AM UTC

Hi Ahmet,  

Sorry for the delay in getting back to you. 

Query: “I have been observing slow javascript interop call performance on pages with Syncfusion components.” 

We have analyzed your query and we understand that you are facing slow performance interop call with Syncfusion components while comparing with HTML components. Syncfusion component such as grid will make JS interop calls to achieve some cases such as DOM, dimension calculations that are not supported by WebAssembly itself. 

But this is default behavior, because Blazor Grid component itself is a incorporation of various inner blazor component to render cell and achieve various features. Hence comparing the performance between the Grid component and HTML table will not be a fair one.  The performance will differ when more number of columns defined in Grid. So we would like to inform you that this is default behavior of Grid and the times shared would be a reasonable one.  

Please get back to us if you have further queries.             

Regards, 
Vignesh Natarajan 


AH Ahmet July 19, 2021 12:22 PM UTC

I see but as far as I know, there is no native Collapse component in Syncfusion Blazor. Do you have a suggestion for an alternative?


VN Vignesh Natarajan Syncfusion Team July 20, 2021 03:40 AM UTC

Hi Ahmet,  
 
Query: “ there is no native Collapse component in Syncfusion Blazor. Do you have a suggestion for an alternative?” 
 
We suspect that you want a Syncfusion Blazor component to collapse and expand with some content inside it. We would like to inform you that we have Accordian component which matches your requirement. Kindly refer the below demo sample and UG documentation.  
 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan  


Loader.
Up arrow icon