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 scorrevole è uno dei pattern di UI più comuni oggi, che si tratti di sfogliare un feed con scorrimento infinito sul tuo sito di social media preferito o di navigare in una dashboard aziendale. Quando gli elenchi 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. Possono anche risultare lenti da visualizzare e navigare , in quanto ogni elemento nell'elenco può contenere informazioni aggiuntive, contenuti multimediali e funzionalità.

Gli utenti possono riscontrare problemi durante il caricamento o lo scorrimento della pagina, il che può causare frustrazione e abbandono della pagina.

Scorri 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 grande, fornendo una barra di scorrimento di dimensioni adeguate, e la possibilità di navigare nell'elenco senza che l'applicazione debba memorizzare l'intero elenco in memoria o visualizzarlo nella pagina.

In Angular, lo scorrimento virtuale è fornito dal Component Dev Kit (CDK). Modificando il modo in cui esegui l'iterazione degli elenchi e fornendo un paio di parametri di configurazione aggiuntivi, lo scorrimento virtuale del CDK gestirà automaticamente il rendering virtuale dei tuoi elenchi, migliorando il rendimento e la reattività della pagina.

Invece di eseguire il rendering dell'intero elenco alla volta, verrà visualizzato solo un sottoinsieme di elementi che si adattano allo schermo (più un piccolo buffer). Mentre l'utente naviga, viene calcolato e visualizzato 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 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. Aggiungila all'array imports del modulo:

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

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

Crea un'area visibile

Per capire come funziona il pacchetto, prova a creare un componente con un semplice 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 visualizzare 100.000 singoli elementi <div>. Questo potrebbe andare bene per semplici nodi di testo, ma qualsiasi complessità nel modello ripetuto non sarà scalabile e gli eventuali ascoltatori di eventi verranno moltiplicati in modo significativo.

Per aggiungere lo scorrimento virtuale ed evitare questi problemi, devi creare un viewport inserendo 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 di sottoinsiemi dell'elenco, devi specificare l'altezza dell'area visibile tramite CSS standard. Devi anche fornire un suggerimento al viewport sui relativi contenuti specificando itemSize. Il modulo utilizza queste informazioni per determinare quanti elementi mantenere nel DOM in un dato momento e come eseguire il rendering di una barra di scorrimento di dimensioni adeguate.

@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);
}

Invece di eseguire l'iterazione dell'intero elenco, la visualizzazione identifica e sottopone a iterazione dinamica il sottoinsieme corretto dell'elenco per l'utente. Ora, quando l'utente carica la pagina, il CDK dovrebbe visualizzare il sottoinsieme dell'elenco adatto allo schermo (più un po' di buffer) e qualsiasi evento di scorrimento nell'area visibile verrà caricato e visualizzato nel sottoinsieme appropriato dell'elenco:

Per saperne di più

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 era possibile recuperarlo on demand per applicazioni più complesse. Per scoprire di più sulle altre funzionalità di ScrollingModule e della direttiva cdkVirtualOf, consulta la sezione relativa a Scrolling nella documentazione del CDK.

Immagine hero di Mr Cup / Fabien Barral su Unsplash.