bug(cdk/scrolling): CDK performance degrades for large lists

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.

[jelbourn]

@mmalerba could you set up some time to pair with Misko on this? I think he would be interested in this use-case and might have some insights on options

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}