You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I was playing around with BlazorWebView lately and I essentially like it a lot.
However, we need to render some quite large UI (essentially a for-each loop that spits out textboxes and checkboxes).
<h1>Show Form</h1>
<p>This component demonstrates rendering our forms in Blazor.</p>
@if (FormViewModelisnull)
{
<p><em>Loading...</em></p>
}else{
<VirtualizeItems="@FormViewModel.VisibleFields"Context="viewModel">
@if (viewModelisTextFieldViewModeltf)
{
<MauiBlazorApp3.FormParts.TextBoxViewModel=@tf />
}else if (viewModelisCheckBoxFieldViewModelcbf)
{
<MauiBlazorApp3.FormParts.CheckboxViewModel=@cbf />
}else if (viewModelisFieldGroupViewModelfg)
{
<MauiBlazorApp3.FormParts.HeadlineViewModel=@fg />
}else if (viewModelisVirtualFieldGroupViewModelvfg)
{
<tr><td>@vfg.Title</td><td>X</td></tr>
}else{
<tr><td>@viewModel.HighlightedTitle.FirstOrDefault()</td><td>X</td></tr>
}
</Virtualize>
}
We noticed, that the initial load is very slow.
With virtualize enabled, on windows, it takes 2 seconds (in release mode!)
On an android phone, it even takes 10 seconds.
Now, this is no way near the complexity of our final product.
So I dug into blazor a bit to find out whether we are doing something wrong.
After pretty-printing blazor.webview.js, I stumbled over a function "insertElement" which seems to be called for every single element that we render in our blazor page:
To me it seems that this is the bottleneck, so I wonder if this could be enhanced by providing something like a "server-side prerender"
Meaning: For the first load, instead of calling the BlazorWebView for each and every element that it should create in the dom, rather send one pre-rendered html fragment to be rendered.
Once that is done, let blazor continue to gradually update the UI.
Is this something that is on the roadmap and I missed it?
Could this be implemented?
Or am I searching at the wrong spot and we do have to find another way to speed things up dramatically?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello!
I was playing around with BlazorWebView lately and I essentially like it a lot.
However, we need to render some quite large UI (essentially a for-each loop that spits out textboxes and checkboxes).
We noticed, that the initial load is very slow.
With virtualize enabled, on windows, it takes 2 seconds (in release mode!)
On an android phone, it even takes 10 seconds.
Now, this is no way near the complexity of our final product.
So I dug into blazor a bit to find out whether we are doing something wrong.
After pretty-printing blazor.webview.js, I stumbled over a function "insertElement" which seems to be called for every single element that we render in our blazor page:
To me it seems that this is the bottleneck, so I wonder if this could be enhanced by providing something like a "server-side prerender"
Meaning: For the first load, instead of calling the
BlazorWebView
for each and every element that it should create in the dom, rather send one pre-rendered html fragment to be rendered.Once that is done, let blazor continue to gradually update the UI.
Is this something that is on the roadmap and I missed it?
Could this be implemented?
Or am I searching at the wrong spot and we do have to find another way to speed things up dramatically?
Thank you for helping me out!
@bruzkovsky - fyi ;-)
Beta Was this translation helpful? Give feedback.
All reactions