Ionic - 8.13 Comprendre le défilement virtuel des listes
Une longue liste peut ralentir une application, car chaque élément est créé dans la page. Le défilement virtuel règle ce problème : seuls les éléments proches de la zone visible sont générés. Cette leçon explique son fonctionnement et ses limites, avant une mise en pratique.
Le problème des listes longues
Avec une boucle classique, tous les éléments d'une liste sont générés, même ceux qui sont hors de l'écran. Si la liste est très longue, cela pèse sur les performances de l'application.
Qu'il s'agisse d'un mobile, d'une tablette ou d'un ordinateur, seule une partie de la liste est visible à un instant donné. Le reste ne devrait pas consommer de ressources inutilement.
Comment fonctionne le défilement virtuel
Les éléments trop éloignés de la zone visible ne sont pas générés. Ceux qui sont proches, mais tout de même hors écran, restent prêts. La vidéo situe cette marge à quatre ou cinq éléments de l'affichage.
Quand on fait défiler la liste, les éléments qui sortent de l'écran sont réutilisés pour afficher un nouveau contenu. Ce recyclage évite de créer et de supprimer trop d'éléments en même temps.
Quand ne pas l'utiliser
Le défilement virtuel optimise les grandes listes, mais il n'est pas adapté aux petites. Pour une vingtaine d'éléments, la logique ajoutée coûte plus que le gain attendu.
En résumé
Le défilement virtuel ne génère que les éléments utiles à l'écran et à sa marge. Les éléments qui sortent sont réutilisés avec un nouveau contenu. Cette approche améliore les performances des très longues listes, mais pas celles des petites listes. La mise en pratique est annoncée pour la prochaine leçon.
Points clés
- Une liste classique génère tous ses éléments, même hors écran.
- Le défilement virtuel ne génère que les éléments proches de l'affichage.
- Les éléments sortis de l'écran sont réutilisés.
- Le gain de performance se voit sur les longues listes.
- Pour une vingtaine d'éléments, ce n'est pas utile.
Questions fréquentes
Le défilement virtuel est-il toujours plus rapide ?
Non. Pour de petites listes, la logique supplémentaire coûte plus cher que le gain, selon la vidéo.
Pourquoi réutiliser les éléments au lieu de les supprimer ?
Réutiliser évite de créer et de supprimer beaucoup d'éléments en même temps, ce qui allège le travail de l'application.
Quels éléments sont générés ?
Ceux qui sont visibles, plus une marge de quatre ou cinq éléments autour de l'affichage.