cdk 虚拟滚动的项目大小

Question

I noticed when I put the itemSize of the cdk virutal scroll to a lower amount the loading time of the page is almost double the amount.

There is a hugh differents between <cdk-virtual-scroll-viewport [itemSize]="45" and <cdk-virtual-scroll-viewport [itemSize]="20" (a table with 2k rows).

My question is why loading of the page goes from 2 seconds to almost 5 seconds? How can it be such a big differents?

Answer 1

[itemSize] dictates how tall in pixels each row in the list is.

The virtual scroller then uses this (in part) to determine how many rows it can buffer above and below the viewport. The less tall you make the itemSize , the more it will try to load and buffer.

As to

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

who knows; that depends entirely on what your actual code is and what the list is instantiating and what's bound, what might trigger RecalcStyle, and so on. Maybe you have some process that iterates your list in O(n ² ), for example, or maybe there are a bunch of event listeners. We'd need more detail to analyze that.