bug(cdk/scrolling): CDK performance degrades for large lists #22109
Description
I noticed that using the CDK virtual scroll directive to render large lists (e.g., 1-2M lines) suffers from severe performance degradation. This was surprising because the virtual scroll only renders a handful of lines (that's the whole point of using virtual scrolling!). After some investigating I noticed that if my component gets the list of items to render as an input parameter, performance degrades. However, if the list of items is defined internally, performance is great.
For example, this gives me great scrolling performance (StackBlitz),
@Component({
selector: 'long-list',
template: `
<cdk-virtual-scroll-viewport itemSize="15">
<div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
class LongListComponent {
items: string[] = Array.from({length: 2e6}).map((_, i) => `Item #${i}`);
}This gives me poor performance (StackBlitz),
@Component({
selector: 'long-list',
template: /* Same as above */,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class LongListComponent {
@Input() items: string[] = [];
}
@Component({
selector: 'my-app',
template: `<long-list [items]="appItems"></long-list>`
})
class MyApp {
appItems: string[] = Array.from({length: 2e6}).map((_, i) => `Item #${i}`);
}You'll see what I mean if you scroll down/up quickly in either example. Of course when the component template is more complex and the view hierarchy is deeper the performance difference is much more pronounced. In my case it makes virtual scroll hardly usable.
Looking at the performance profile, it seems like change detection is kicking in as I scroll and doing processing that apparently scales up along with the size of the list. If that's true, it means that even modestly long lists are suffering from excessive processing.