angular - cdk虚拟卷轴的项目大小

Question

我注意到，当我将 cdk virutal scroll 的 itemSize 调低时，页面的加载时间几乎是原来的两倍。

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

我的问题是为什么页面加载时间从 2 秒缩短到将近 5 秒？怎么会相差这么大？

Answer 1

[itemSize] 指示列表中每行的高度(以像素为单位)。

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

至于

why loading of the page goes from 2 seconds to almost 5 seconds?

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