.NET 8 Blazor Web App流式渲染困惑：UI冻结问题求解

核心原因 #

你遇到的UI冻结，根源不在数据生成阶段（已经用Task.Run移到后台线程），而在数据渲染阶段：

• 当你一次性绑定几万条数据时，Blazor Server（默认模板的交互式服务器渲染模式）需要在服务器端同步渲染所有列表项的DOM元素，这个过程会占用服务器的渲染线程，导致客户端与服务器的SignalR连接无法响应其他交互请求，最终客户端UI看起来冻结。
• [StreamRendering]的作用是分块传输初始HTML，但对于数据加载完成后的全量DOM渲染，它无法拆分这个繁重的渲染任务，所以起不到预期效果。

解决办法 #

1. 分批次渲染（最有效）

不要一次性渲染所有数据，改用分页或滚动加载，每次只渲染少量条目（比如100条）：

private List<WeatherForecast> forecasts = new();
private int currentPage = 0;
private const int PageSize = 100;
private DateTime startDate = DateTime.Now;
private string[] summaries = ["Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"];

protected override async Task OnInitializedAsync()
{
    // 后台预生成全量数据（实际场景建议从数据库分页查询）
    var allForecasts = await Task.Run(() => 
        Enumerable.Range(1, 50000)
            .Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = summaries[Random.Shared.Next(summaries.Length)]
            }).ToList());

    // 加载第一页数据
    LoadPage(allForecasts, currentPage);
}

private void LoadPage(List<WeatherForecast> allData, int page)
{
    var start = page * PageSize;
    var pageData = allData.Skip(start).Take(PageSize).ToList();
    forecasts.AddRange(pageData);
    StateHasChanged();
}

// 绑定到滚动事件或"加载更多"按钮的方法
private async Task LoadNextPage()
{
    currentPage++;
    // 模拟分页生成数据（实际场景替换为数据库分页查询）
    var nextPageData = await Task.Run(() => 
        Enumerable.Range(currentPage * PageSize + 1, PageSize)
            .Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = summaries[Random.Shared.Next(summaries.Length)]
            }).ToList());
    
    forecasts.AddRange(nextPageData);
}

在组件Razor部分，渲染列表并添加加载更多按钮：

@foreach (var forecast in forecasts)
{
    <div class="weather-item">
        <p>@forecast.Date.ToShortDateString() - @forecast.TemperatureC°c - @forecast.Summary</p>
    </div>
}

<button @onclick="LoadNextPage" disabled="@(currentPage * PageSize >= 50000)">加载更多</button>

2. 使用虚拟化组件

Blazor内置的Virtualize组件只会渲染当前视口内的条目，大幅减少DOM渲染数量，即使绑定全量数据也不会导致冻结：

<Virtualize Items="@forecasts" ItemSize="40">
    <ItemTemplate>
        <div class="weather-item">
            <p>@context.Date.ToShortDateString() - @context.TemperatureC°c - @context.Summary</p>
        </div>
    </ItemTemplate>
</Virtualize>

3. 调整渲染模式

如果切换到交互式WebAssembly模式，数据生成和渲染都在客户端执行，此时可结合JS的Web Worker处理数据生成，但仍建议用分页或虚拟化优化渲染，避免客户端主线程被占用。

内容的提问来源于stack exchange，提问作者Abdulsalam Elsharif