Améliorez la réactivité des listes volumineuses en implémentant le défilement virtuel.
La liste déroulante est l'un des modèles d'interface utilisateur les plus courants aujourd'hui, qu'il s'agisse de parcourir un flux à défilement infini sur votre réseau social préféré ou de naviguer dans un tableau de bord d'entreprise. Lorsque les listes à faire défiler 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.
Le chargement des listes volumineuses peut être lent, car l'application doit charger et afficher toutes les données à l'avance. Leur rendu et leur navigation peuvent également être lents , car chaque élément de la liste peut comporter des données enrichies, des contenus multimédias et des fonctionnalités.
Les utilisateurs peuvent rencontrer des problèmes lorsqu'ils chargent ou font défiler la page, ce qui peut les frustrer et les inciter à l'abandonner.
Défilement virtuel dans Angular avec le Component Dev Kit
Le défilement virtuel est la principale technique utilisée pour résoudre ces problèmes de scaling. Le défilement virtuel donne l'impression d'une liste très longue, 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 conserver l'intégralité de la liste en mémoire ou de l'afficher sur la page.
Dans Angular, le défilement virtuel est fourni par le Component Dev Kit (CDK). 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 CDK gérera automatiquement l'affichage virtuel de vos listes, ce qui améliorera les performances et la réactivité de la page.
Au lieu d'afficher l'intégralité de la liste en une seule fois, seul un sous-ensemble des éléments qui tiennent à l'écran (plus un petit tampon) sera affiché. À mesure que 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 trouverez un exemple complet dans cette application exemple :
Configurer le défilement virtuel
Commencez par vérifier que vous avez installé @angular/cdk à l'aide de votre gestionnaire de paquets favori. Pour l'installer à l'aide de npm, exécutez la commande suivante dans le terminal :
npm install --save @angular/cdk
Ajouter ScrollingModule à votre application
Une fois le CDK installé, importez ScrollingModule, qui gère le défilement virtuel, à partir du package @angular/cdk/scrolling. Ajoutez-le ensuite au tableau des importations de votre module :
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
Créer une fenêtre d'affichage
Pour voir comment fonctionne le package, essayez de créer un composant avec une liste de nombres 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 <div> individuels. Cela peut convenir pour les nœuds de texte de base, mais toute complexité dans le modèle répété ne s'adapte pas bien, et 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 de manière dynamique des sous-ensembles de la liste, vous devez spécifier la hauteur de la fenêtre d'affichage avec du code CSS standard. Vous devez également fournir une indication sur le contenu de la fenêtre d'affichage 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 pour 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 d'itérer sur l'ensemble de la liste, la fenêtre d'affichage identifie et itère de manière dynamique sur le sous-ensemble approprié de la liste pour l'utilisateur. Désormais, lorsque l'utilisateur charge la page, le CDK doit afficher le sous-ensemble de la liste qui tient sur l'écran (plus un peu de marge), 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 CDK vont bien au-delà de cet exemple de base. Dans l'application exemple, la liste complète était en mémoire, mais elle peut ê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 directive cdkVirtualOf, consultez la section sur Scrolling dans la documentation CDK.