Blazor Virtualize 组件通过虚拟滚动仅渲染可视区域项,避免全量 DOM 创建,解决长列表卡顿等问题;需设固定高度容器、用 Items 或 ItemsProvider 绑定数据源,并可配置 OverscanCount 和 Placeholder 优化体验。

Blazor 的 Virtualize 组件通过“虚拟滚动”只渲染可视区域内的项,大幅减少 DOM 元素数量,解决长列表卡顿、内存占用高、首次加载慢等问题。关键不是“全量渲染后隐藏”,而是根本不去创建不可见项的 DOM。
基础用法:替换 @foreach
把原来遍历集合的 @foreach 替换成 ,并指定数据源和每项模板:
- 用
Items="@items"绑定可枚举集合(支持IEnumerable、IQueryable、Array) - 用
ItemContent模板定义单个条目结构,内部用@context访问当前项 - 容器需有固定高度(如
style="height: 500px;"),否则无法计算可视区域
示例:
@product.Name - @product.Price
提升性能:配合分页式数据源
当数据量极大(如百万级),不建议一次性加载全部到内存。应让 ItemsProvider 按需拉取:
- 设置
ItemsProvider="@LoadProductsAsync",替代Items - 方法签名必须是
ValueTask> Func >> - 从
request.StartIndex和request.Count算出数据库分页参数(如OFFSET ... LIMIT ...) - 返回
new ItemsProviderResult,其中(data, totalItemCount) totalItemCount用于滚动条比例计算
优化体验:设置占位与缓冲区
默认只渲染刚好可见的项,快速滚动时可能白屏或闪烁。加两个属性改善:
-
OverscanCount:额外多渲染几项(上下各 N 行),比如设为3可让滚动更顺滑 -
Placeholder:在数据加载中显示骨架屏,避免空白等待
示例:
...
注意细节:避免常见坑
不支持嵌套 Virtualize 或在 flex/grid 容器中无显式高度;确保父容器有 overflow-y: auto 或由外层滚动控制;ItemsProvider 中不要做耗时同步操作;若项高度不一致,虚拟化仍能工作,但滚动条位置可能不够精确(此时可配合 ItemSize 预估平均高度提升精度)。
基本上就这些。用对 Virtualize,万级列表也能丝滑滚动,不复杂但容易忽略高度和数据源模式这两个关键点。










