如何避免Blazor Virtualize组件初始闪烁及滚动留白延迟？

解决初始加载首项闪烁问题 #

1. 提前预加载首项数据 #

在组件初始化阶段先获取第一条数据，初始渲染时直接渲染该数据，避免Virtualize初始化过程中的空白闪烁：

@code {
    private List<Item> _items;
    private Item _firstItem;

    protected override async Task OnInitializedAsync()
    {
        // 优先加载首项数据
        _firstItem = await FetchItemAsync(0);
        // 再加载完整数据集
        _items = await FetchAllItemsAsync();
    }
}

<!-- 先渲染预加载的首项 -->
@if (_firstItem != null)
{
    <div class="list-item">@_firstItem.Title</div>
}

<Virtualize Items="@_items" ItemSize="60">
    <ItemTemplate Context="item">
        <!-- 跳过已渲染的首项，避免重复 -->
        @if (item.Id != _firstItem.Id)
        {
            <div class="list-item">@item.Title</div>
        }
    </ItemTemplate>
</Virtualize>

2. 给Virtualize容器设置固定初始高度 #

避免组件初始化时因高度塌陷导致的布局跳动，设置最小高度为单个项的实际高度：

<Virtualize Items="@_items" ItemSize="60" style="min-height: 60px;">
    <!-- 模板内容 -->
</Virtualize>

3. 使用@key稳定项的追踪 #

给每个列表项绑定唯一@key，防止Virtualize触发不必要的重渲染：

<Virtualize Items="@_items" ItemSize="60">
    <ItemTemplate Context="item">
        <div class="list-item" @key="item.Id">@item.Title</div>
    </ItemTemplate>
</Virtualize>

解决滚动时Placeholder留白延迟问题 #

1. 调整OverscanCount增加预加载项数 #

OverscanCount控制Virtualize在可视区域外预加载的项数量，提高该值可让数据在滚动到之前完成加载，减少留白：

<Virtualize Items="@_items" ItemSize="60" OverscanCount="12">
    <ItemTemplate Context="item">
        <div class="list-item">@item.Title</div>
    </ItemTemplate>
    <PlaceholderTemplate>
        <div class="list-item placeholder">加载中...</div>
    </PlaceholderTemplate>
</Virtualize>

建议根据项高度和滚动速度调整，通常设置为5-20之间

2. 确保ItemSize与实际项高度完全匹配 #

如果ItemSize设置与项的实际渲染高度（含padding、margin）不一致，会导致Virtualize的滚动计算偏差，延迟placeholder的替换：

.list-item {
    height: 44px;
    padding: 8px;
    /* 总高度=44+16=60，对应Virtualize的ItemSize="60" */
}

3. 优化数据加载性能 #

通过缓存机制避免重复请求，或缩短异步加载的延迟：

@code {
    private Dictionary<int, Item> _itemCache = new();

    private async Task<Item> FetchItemAsync(int index)
    {
        if (_itemCache.TryGetValue(index, out var cachedItem))
        {
            return cachedItem;
        }
        // 模拟数据加载，尽量缩短实际场景中的延迟
        await Task.Delay(30);
        var newItem = new Item { Id = index, Title = $"条目 {index}" };
        _itemCache[index] = newItem;
        return newItem;
    }
}

内容的提问来源于stack exchange，提问作者Amaurys Sánche