Skip to content

VirtList为流式对话而生的虚拟滚动

列表 / 网格 / 树形三种形态,五个框架共享同一内核。行高由内容决定,三百万行与三十行,滚动开销一样。

O(1)
稳态滚动定位
每帧只跨越几项,成本与列表长度无关
O(√n)
跳转任意位置
分块索引,不定高也不必逐项累加
一屏
DOM 节点数
300 万行与 30 行的节点数相同
6.1KB
gzip 体积
VirtList 完整链路,核心零运行时依赖

复杂度一览

虚拟列表的性能上限由算法决定,而不是由某次跑分决定。下面是各操作的时间复杂度, 包括省不掉的那一项——n 为数据总量。

操作固定高不定高为什么
稳态滚动定位O(1)O(1)从上一帧的位置增量推进,每帧只跨越几项
跳转到任意项O(1)O(√n)固定高一次除法;不定高走分块索引,跨块查表 + 块内累加
单项尺寸变化后修正O(1)整块定位:只改渲染块那一个 transform,块内由浏览器重排
渲染窗口 DOM 节点数O(视口)O(视口)只创建可视区与缓冲区内的节点,与数据量无关
整体替换数据源O(1)O(n)总尺寸依赖每一项的高度,这一趟扫描省不掉