Aller au contenu principal

Large Data Sets

Ouvrir dans ChatGPT

Défilement virtuel

Le composant Table est conçu pour gérer efficacement de grands ensembles de données en utilisant le défilement virtuel, qui est une technique utilisée dans les applications web pour optimiser le rendu et les performances de grandes listes ou tables en ne rendant que les éléments visibles à l'écran.

Rendu initial

Le défilement virtuel est un modèle de conception dans lequel, au début, seule une petite sous-partie des éléments qui s'intègrent dans la zone visible du conteneur défilable est rendue. Cela minimise le nombre d'éléments DOM créés et accélère le processus de rendu initial.

Chargement dynamique

Au fur et à mesure que l'utilisateur fait défiler vers le bas ou vers le haut, de nouveaux éléments sont chargés dynamiquement dans la vue. Ces éléments sont généralement récupérés à partir de la source de données en fonction de la position actuelle du défilement.

Recyclage d'éléments

Au lieu de créer un nouvel élément DOM pour chaque élément, le défilement virtuel utilise souvent des éléments DOM existants. À mesure qu'un élément sort de la zone visible, son élément DOM est recyclé et réutilisé pour un nouvel élément entrant dans la zone visible. Ce processus de recyclage aide à réduire l'utilisation de la mémoire et améliore les performances.

Avantages en termes de performance :

Le principal avantage du défilement virtuel est l'amélioration des performances, notamment lors de la gestion d'un grand nombre d'éléments. Cela réduit la quantité de manipulation DOM et améliore la réactivité globale de l'interface utilisateur.

Le tableau ci-dessous montre tous les gagnants olympiques - un grand ensemble de données qui bénéficie grandement de la fonctionnalité de défilement virtuel du tableau :

Afficher le code

Overscan

Définir la propriété Overscan du tableau détermine combien de lignes rendre en dehors de la zone visible. Ce paramètre peut être configuré avec la méthode setOverscan(double value).

Une valeur d'overscan plus élevée peut réduire la fréquence de rendu lors du défilement, mais au prix de rendre plus de lignes que celles visibles à un moment donné. Cela peut être un compromis entre la performance de rendu et la fluidité du défilement.