虚拟化
虚拟化用于让大数据组件只处理可视窗口附近的项目。它不是一种视觉效果,而是一种数据到视窗的映射策略。
固定高度虚拟化
固定高度项目可以按下面的输入计算可视区间。框架内部的数据组件会维护这类 range 状态。
input:
itemCount: 100000
itemSize: 24
viewportSize: 480
scrollOffset: 1200
overscan: 4
output:
visibleStartIndex
visibleEndIndex
startIndex
endIndex
leadingPadding
trailingPadding
totalSize
scrollOffset
返回结果包含:
visibleStartIndexvisibleEndIndexstartIndexendIndexleadingPaddingtrailingPaddingtotalSizescrollOffset
startIndex 和 endIndex 包含 overscan,适合真实渲染。
可变高度虚拟化
可变高度项目依赖估算高度和已测量高度缓存。核心流程如下:
sync item keys
-> use estimated size for unknown items
-> measure visible item size
-> update prefix sum
-> preserve scroll anchor
-> calculate next visible range
可变高度虚拟化需要处理滚动锚点,避免项目高度更新后视窗跳动。
滚动到项目
固定高度和可变高度都需要支持滚动到指定项目。关键是根据目标项目起止位置和当前 viewport 计算下一个 scroll offset。
align: 'nearest' 是交互上最稳定的选择:目标已经可见时不调整滚动条。
使用建议
- 行高稳定的表格、文本编辑器优先固定高度虚拟化。
- 高度不稳定的树、卡片列表、对象查看器使用可变高度策略。
- overscan 不宜过大,否则会抵消虚拟化收益。
- 虚拟化组件应自己管理滚动,不要套同方向外层 ScrollViewer。