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