cdk 虚拟滚动的项目大小

Question

我注意到当我将 cdk 虚拟滚动的 itemSize 设置为较低的值时，页面的加载时间几乎是两倍。

<cdk-virtual-scroll-viewport [itemSize]="45"和<cdk-virtual-scroll-viewport [itemSize]="20" （一个有 2k 行的表格）之间有很大的不同。

我的问题是为什么页面的加载从 2 秒到将近 5 秒？ 怎么会有这么大的不同？

Answer 1

[itemSize]指示列表中每行的像素高度。

然后虚拟滚动条使用它（部分）来确定它可以在视口上方和下方缓冲多少行。 您使itemSize高度越itemSize ，它尝试加载和缓冲的次数就越多。

至于

为什么页面的加载时间从 2 秒到将近 5 秒？

谁知道; 这完全取决于您的实际代码是什么，列表正在实例化什么，绑定什么，什么可能触发 RecalcStyle，等等。 例如，也许您有一些以 O(n ² ) 迭代您的列表的过程，或者也许有一堆事件侦听器。 我们需要更多细节来分析。