Grid Blazor vs Asp Net Core performance

Question

Hello,I noticed that the Blazor Grid has much lower performance than the Asp Net Core Grid, I thought in the end the HTML and JS were the same regardless of the platform.To show what I mean, I build a little sample (for both platforms) where there is a Grid that load 8000 items generated randomly in pages of 1000 items each.The first thing you can see launching the two apps is that the Asp Net Core one loads the page in much less time, it is almost immediate.But the real difference is when you go from one grid page to another: the Blazor version continues to load for an almost infinite time.I'm attaching to this post a zip  the sample code and a video showing the load times.Thank you.Attachment: GridTest_e2f8e849.zip

Fabrizio Alessandro · Answer

Just updated to the new Syncfusion.Blazor 18.1.0.36-beta - same result.

Vignesh Natarajan · Answer

Hi Fabrizio,  

Thanks for the contacting Syncfusion forums.  

Query: “I noticed that the Blazor Grid has much lower performance than the Asp Net Core Grid, I thought in the end the HTML and JS were the same regardless of the platform” 
 
ASP.NET Core and Blazor uses different rendering approach. Let us discuss few of them from below table. 
 




ASP.NET Core 

Blazor 


Syncfusion Asp.Net core controls are JavaScript wrapper controls of our EJ2 suite. 

Syncfusion Blazor components are native Blazor component which rendered using Blazor methodologies. 
https://www.syncfusion.com/blogs/post/syncfusions-native-blazor-components-are-production-ready.aspx 



There is no connection between server and client, everything happens at the client side using JavaScript.  

Here Blazor uses SignalR connection when client initialize a component and every DOM update invokes diff calculation at the server and diff algorithm results will be sent to client side using SignalR connection. 

Due to this roundtrip you may experience some delay or sluggish UI rendering updates. 


DOM elements were created in client side and updated in the client side itself by JavaScript. We uses various performant way to update DOM by updating them asynchronously.  

DOM creation and update is handled by the Blazor framework itself.  

Kindly get back to us if you have any other concern.  

Regards, 
Vignesh Natarajan.

Fabrizio Alessandro · Answer

Thank you for your reply,Ok that Asp Net Core and Blazor controls have different rendering, but by trying the example or watching the video is it possible that the fault of this huge slowness is only from SignalR (even if client and server are on the same machine)? Moving from one page to another takes almost infinite time, can it be that something is wrong?Having clarified this, is it correct to think that for this type of application with large amounts of data to load, the use of your Blazor Grid is the wrong choice?

Vignesh Natarajan · Answer

Hi Fabrizio,  

Query1: “Moving from one page to another takes almost infinite time, can it be that something is wrong?” 

We have ensured the reported issue by running the provided sample at our end. And we are not able to reproduce the reported issue at our end (Spinner is shown continuously while paging). We have prepared a sample Video by navigating to next pages (it takes nearly 30s to navigate from on page to another). Please find the video from below  

Video: https://drive.google.com/file/d/1KEI8E2CaenCAhgQ9mTwiEDzP0QGy1P4R/view  

There will be some time delay in updating the elements since it contains large set of rows and columns. But if spinner continues for longer time. Kindly check the browser console (ctrl+F12) for any exception and share the details if you are facing any.  

Query2: “is it correct to think that for this type of application with large amounts of data to load, the use of your Blazor Grid is the wrong choice?” 

You have used 1000 rows and 30 columns so nearly 30000 children elements are present even though Blazor handles DOM updates, having large number of DOM elements in browser memory is still uses more memory.  So we suggest you to either to reduce the PageSize of Grid or use Virtual Scrolling feature with lesser pages size while binding large number of data into Grid. 

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/grid/virtual/  

https://blazor.syncfusion.com/documentation/grid/paging/    

Regards, 
Vignesh Natarajan.

ASP.NET Core	Blazor
Syncfusion Asp.Net core controls are JavaScript wrapper controls of our EJ2 suite.	Syncfusion Blazor components are native Blazor component which rendered using Blazor methodologies. https://www.syncfusion.com/blogs/post/syncfusions-native-blazor-components-are-production-ready.aspx
There is no connection between server and client, everything happens at the client side using JavaScript.	Here Blazor uses SignalR connection when client initialize a component and every DOM update invokes diff calculation at the server and diff algorithm results will be sent to client side using SignalR connection. Due to this roundtrip you may experience some delay or sluggish UI rendering updates.
DOM elements were created in client side and updated in the client side itself by JavaScript. We uses various performant way to update DOM by updating them asynchronously.	DOM creation and update is handled by the Blazor framework itself.