Virtualizza elenchi di grandi dimensioni con la CDK di Angular

Rendi più reattivi gli elenchi di grandi dimensioni implementando lo scorrimento virtuale.

Stephen Fluin

L'elenco a scorrimento è uno dei pattern UI più comuni al giorno d'oggi, sia che si tratti di sfogliare un feed a scorrimento infinito sul tuo sito di social media preferito o di navigare in una dashboard aziendale. Quando gli elenchi a scorrimento diventano molto lunghi (centinaia, migliaia o centinaia di migliaia di elementi), le prestazioni dell'applicazione possono risentirne.

Il caricamento di elenchi di grandi dimensioni può essere lento perché l'applicazione deve caricare ed eseguire il rendering di tutti i dati in anticipo. Il rendering e la navigazione possono essere lenti anche perché ogni elemento dell'elenco può contenere informazioni aggiuntive, contenuti multimediali e funzionalità.

Gli utenti possono riscontrare problemi durante il caricamento o lo scorrimento della pagina, il che porta a frustrazione e all'abbandono della pagina.

Scorrimento virtuale in Angular con Component Dev Kit

Lo scorrimento virtuale è la tecnica principale utilizzata per risolvere questi problemi di scalabilità. Lo scorrimento virtuale dà l'impressione di un elenco molto lungo, fornendo una barra di scorrimento di dimensioni appropriate e la possibilità di navigare nell'elenco senza richiedere all'applicazione di memorizzare l'intero elenco in memoria o di eseguirne il rendering sulla pagina.

In Angular, lo scorrimento virtuale è fornito da Component Dev Kit (CDK). Modificando il modo in cui scorri gli elenchi e fornendo un paio di parametri di configurazione aggiuntivi, lo scorrimento virtuale del CDK gestirà automaticamente il rendering virtuale degli elenchi, migliorando le prestazioni e la reattività della pagina.

Anziché eseguire il rendering dell'intero elenco contemporaneamente, verrà eseguito il rendering solo di un sottoinsieme degli elementi che rientrano nello schermo (più un piccolo buffer). Man mano che l'utente naviga, viene calcolato ed eseguito il rendering di un nuovo sottoinsieme di elementi, riutilizzando il DOM esistente, se necessario.

Il resto di questo post illustra come configurare lo scorrimento virtuale di base. Puoi vedere un esempio funzionante completo in questa app di esempio:

Configurare lo scorrimento virtuale

Innanzitutto, assicurati di aver installato @angular/cdk utilizzando il tuo gestore di pacchetti preferito. Per installarlo utilizzando npm, esegui questo comando nel terminale:

npm install --save @angular/cdk

Aggiungere ScrollingModule all'app

Con il CDK installato, importa ScrollingModule, che gestisce lo scorrimento virtuale, dal pacchetto @angular/cdk/scrolling. Poi aggiungilo all'array di importazioni del modulo:

import {ScrollingModule} from '@angular/cdk/scrolling';

...
imports: [
  ScrollingModule
...
]
...

Creare una finestra di visualizzazione

Per vedere come funziona il pacchetto, prova a creare un componente con un elenco di numeri da 0 a 99.999:

@Component({
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Quando il browser esegue il rendering dell'app, deve eseguire il rendering di 100.000 singoli <div> elementi. Questo potrebbe essere accettabile per i nodi di testo di base, ma qualsiasi complessità nel modello ripetuto non è scalabile e tutti i listener di eventi verranno moltiplicati in modo significativo.

Per aggiungere lo scorrimento virtuale ed evitare questi problemi, devi creare una finestra di visualizzazione racchiudendo l'elenco in un elemento <cdk-virtual-scroll-viewport>:

@Component({
  template: `<cdk-virtual-scroll-viewport>
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Poiché ScrollingModule esegue il rendering dinamico dei sottoinsiemi dell'elenco, devi specificare l'altezza della finestra di visualizzazione con CSS standard. Devi anche fornire alla finestra di visualizzazione un suggerimento sui suoi contenuti specificando itemSize. Il modulo utilizza queste informazioni per determinare quanti elementi mantenere nel DOM in un determinato momento e come eseguire il rendering di una barra di scorrimento di dimensioni appropriate.

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *ngFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Infine, converti *ngFor in *cdkVirtualFor:

@Component({
  template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
    <div *cdkVirtualFor="let item of list">{{item}}</div>
    </cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

Anziché scorrere l'intero elenco, la finestra di visualizzazione identifica e scorre dinamicamente il sottoinsieme corretto dell'elenco per l'utente. Ora, quando l'utente carica la pagina, il CDK dovrebbe eseguire il rendering del sottoinsieme dell'elenco che rientra nello schermo (più un po' di buffer) e tutti gli eventi di scorrimento nella finestra di visualizzazione caricano ed eseguono il rendering del sottoinsieme appropriato dell'elenco:

Andare oltre

Le funzionalità di scorrimento virtuale del CDK vanno ben oltre questo esempio di base. Nell' app di esempio, l'intero elenco era in memoria, ma l'elenco poteva essere recuperato su richiesta per applicazioni più complesse. Puoi scoprire di più sulle altre funzionalità di ScrollingModule e sulla direttiva cdkVirtualOf leggendo la sezione Scrolling nella documentazione del CDK.