Virtualiser de grandes listes avec le CDK Angular

Rendez les longues listes plus réactives en implémentant le défilement virtuel.

Stephen Fluin

La liste de défilement est l'un des modèles d'interface utilisateur les plus courants aujourd'hui, qu'il s'agisse de parcourir un flux de défilement infini sur votre site de réseau social préféré ou de naviguer dans un tableau de bord d'entreprise. Lorsque les listes de défilement deviennent très longues (des centaines, des milliers ou des centaines de milliers d'éléments), les performances de l'application peuvent en pâtir.

Les longues listes peuvent être lentes à charger, car l'application doit charger et afficher toutes les données à l'avance. Elles peuvent également être lentes à afficher et à parcourir , car chaque élément de la liste peut contenir des informations enrichies, des médias et des fonctionnalités.

Les utilisateurs peuvent rencontrer des problèmes lorsqu'ils chargent ou font défiler la page, ce qui peut entraîner de la frustration et l'abandon de la page.

Défilement virtuel dans Angular avec le kit de développement de composants

Le défilement virtuel est la principale technique utilisée pour résoudre ces problèmes d'échelle. Il donne l'impression d'une très longue liste en fournissant une barre de défilement de taille appropriée et la possibilité de parcourir la liste sans que l'application ait besoin de la conserver en mémoire ni de l'afficher sur la page.

Dans Angular, le défilement virtuel est fourni par le kit de développement de composants. En modifiant la façon dont vous parcourez les listes et en fournissant quelques paramètres de configuration supplémentaires, le défilement virtuel du kit de développement de composants gère automatiquement l'affichage virtuel de vos listes, ce qui améliore les performances et la réactivité des pages.

Au lieu d'afficher l'intégralité de la liste à la fois, seul un sous-ensemble des éléments qui tiennent à l'écran (plus une petite mémoire tampon) est affiché. Lorsque l'utilisateur navigue, un nouveau sous-ensemble d'éléments est calculé et affiché, en réutilisant le DOM existant si vous le souhaitez.

Le reste de cet article explique comment configurer le défilement virtuel de base. Vous pouvez voir un exemple de code complet et fonctionnel dans cet exemple d'application :

Configurer le défilement virtuel

Tout d'abord, assurez-vous d'avoir installé @angular/cdk à l'aide de votre gestionnaire de paquets préféré. Pour l'installer à l'aide de npm, exécutez cette commande dans le terminal :

npm install --save @angular/cdk

Ajouter ScrollingModule à votre application

Une fois le kit de développement de composants installé, importez ScrollingModule, qui gère le défilement virtuel, à partir du package @angular/cdk/scrolling. Ajoutez-le ensuite au tableau d'importations de votre module :

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

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

Créer une fenêtre d'affichage

Pour voir comment le package fonctionne, essayez de créer un composant avec une liste de nombres allant de 0 à 99 999 :

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

Lorsque le navigateur affiche l'application, il doit afficher 100 000 éléments individuels <div>. Cela peut convenir aux nœuds de texte de base, mais toute complexité dans le modèle répété ne s'adapte pas bien, et tous les écouteurs d'événements seront multipliés de manière significative.

Pour ajouter le défilement virtuel et éviter ces problèmes, vous devez créer une fenêtre d'affichage en encapsulant la liste dans un élément <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);
}

Étant donné que ScrollingModule affiche dynamiquement des sous-ensembles de la liste, vous devez spécifier la hauteur de la fenêtre d'affichage avec une feuille de style (CSS) standard. Vous devez également donner à la fenêtre d'affichage un indice sur son contenu en spécifiant itemSize. Le module utilise ces informations pour déterminer le nombre d'éléments à conserver dans le DOM à un moment donné et comment afficher une barre de défilement de taille appropriée.

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

Enfin, convertissez *ngFor en *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);
}

Au lieu de parcourir l'intégralité de la liste, la fenêtre d'affichage identifie et parcourt dynamiquement le sous-ensemble approprié de la liste pour l'utilisateur. Désormais, lorsque l'utilisateur charge la page, le kit de développement de composants doit afficher le sous-ensemble de la liste qui tient à l'écran (plus une petite mémoire tampon), et tous les événements de défilement dans la fenêtre d'affichage chargent et affichent le sous-ensemble approprié de la liste :

Aller plus loin

Les fonctionnalités de défilement virtuel du kit de développement de composants vont bien au-delà de cet exemple de base. Dans l'application exemple, l'intégralité de la liste était en mémoire, mais elle pouvait être récupérée à la demande pour des applications plus complexes. Pour en savoir plus sur les autres fonctionnalités de ScrollingModule et de la cdkVirtualOf directive, consultez la section Scrolling dans la documentation du kit de développement de composants.