Tabs performance

Hello @Team.

The tabs below take long seconds to load and they get even worse in production.


I want to discuss possible improvements. The demo shows some waiting times too, specially when selecting the "Employee" tab, probably because of the many columns of the grid.

The first thing I can think of is to upgrade my app to NET 5, because of the reported performance enhancements they did in the Blazor framework, although they might only impact the WASM applications. Second thing is rendering only the visible page on page load, and render the remaining pages in a background thread while keeping them hidden. The expander, for example, doesn't load its contents every time you expand it, but on page load.

The Tabs component by itself is rather simple and doesn't involve any performance overhead. You can check it for yourself. Also by default it renders only the selected tab.

The demo uses database access which inherently introduces a delay. Not to mention the way Blazor server works (highly dependable on latency). Here is how this demo behaves online (I am on a not-so good connection at the moment):


VS on localhost:

I think it is the content of the tabs and the implementation of the page that is causing the delay rather than the RadzenTabs component itself. You can try hiding various parts and commenting some of the codebehind to see if it makes a difference. Upgrading to .net 5 may also help but I won't expect a dramatic improvement if you page relies on a lot of database calls.

1 Like

A key feature in our app is performance. We use raw SQL for database queries, Dapper for mapping, SpanJson for serialization and dynamic arrays throughout the pages to reduce data overhead, so data manipulation is very fast.

Here is how the tabs perform in a localhost environment. There is no triggered code when switching between tabs, because all data is loaded on page load. Yet there is a considerable delay when moving through some of the tabs.

Tabs 2 and specifically 4 are particularly slower because of the multiple components rendered in the DataList template. Maybe this has nothing to do with the tabs themselves, but with the DataList component having to render many components in each template.

How does the DataList demo perform in localhost?

Hey @kim,

Try the new RenderMode="TabRenderMode.Client" as shown in our demo:

Unfortunately nothing really changed.

Here's the last tab (slowest one) if it helps:

<RadzenTabsItem Style="height:100%" Text="@(Language.GetTextType(LanguageService.TextType.Documents))" Visible=@(PersonGroup.PersonDocumentsVisible)>
    <ChildContent>
        <RadzenDataList Data="@PersonDocuments" Style="max-height:100%;overflow-x:hidden;overflow-y:auto" TItem="EntityDocument" >
            <Template Context="personDocument">
                <div class="row align-items-center">
                    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                        <RadzenLabel Text="@($"{(personDocument.Document.Name)}")" />
                    </div>
                    <div class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9">
                        <div class="row align-items-center">
                            <RadzenMask @bind-Value="@(personDocument.Number)" Mask="@(personDocument.Document.Mask)" Pattern="@(personDocument.Document.Pattern)" Placeholder=@(Language.GetTextType(LanguageService.TextType.Number)) Style="width:22%" Visible="@(personDocument.Document.Number)" />
                            <RadzenCheckBox @bind-Value="@(personDocument.Conformity)" Style="margin-left:0.5rem;margin-right:0.5rem;width:3%" Visible="@(personDocument.Document.Conformity)" />
                            <RadzenLabel Style="width:12%" Text="@(Language.GetTextType(LanguageService.TextType.Conformed))" />
                            <RadzenDatePicker @bind-Value="@(personDocument.Expiration)" DateFormat="@(Language.GetDateFormat())" Placeholder=@(Language.GetTextType(LanguageService.TextType.Expiration)) Style="width:19%" Visible=@(personDocument.Document.Expiration) YearRange="2021:2099" />
                            <RadzenDatePicker @bind-Value="@(personDocument.Extension)" DateFormat="@(Language.GetDateFormat())" DateRender="@((args) => PersonDocumentExtensionDatePickerDateRender(args, personDocument))" Placeholder=@(Language.GetTextType(LanguageService.TextType.Extension)) Style="width:19%" Visible=@(personDocument.Document.ExtensionLimit != null) YearRange="2021:2099" />
                            <RadzenTextArea @bind-Value="@(personDocument.Observation)" Placeholder="@(Language.GetTextType(LanguageService.TextType.Observation))" Rows="1" Style="width:20%" Visible="@(personDocument.Document.Observation)" />
                        </div>
                    </div>
                </div>
            </Template>
        </RadzenDataList>
    </ChildContent>
</RadzenTabsItem>

Here's with 15 items in the "Documentos" tab, in localhost and with render mode set to client:

The DataList is nothing more than a simple foreach over the current page of data. Not sure what else could cause the delay but we can troubleshoot a reproduction if you have any. I suspect it is the sheer number of components that need to initialise and the network latency which is an inherent Blazor server weakness. It would explain why the page performs a lot better on localhost.