Le problème du rendu des grandes listes

Supposons que vous parcouriez un tableau de dix mille éléments et que vous rendiez un élément li pour chacun d’eux. React créera consciencieusement dix mille nœuds DOM, alors que seuls quelques dizaines tiennent à l’écran simultanément.

La plupart de ces nœuds sont hors écran et invisibles, mais le navigateur doit tout de même les créer, effectuer leur mise en page et les maintenir tous.

Les grands arbres DOM ont un coût réel pour le navigateur. La mise en page, le recalcul des styles et la mémoire augmentent tous avec le nombre de nœuds : une liste immense ralentit le rendu initial et accroît l’utilisation de la mémoire.

Même des interactions simples peuvent saccader lorsque le moteur doit suivre et recalculer la mise en page de dizaines de milliers de nœuds.

C’est lors du défilement d’une liste immense que les utilisateurs ressentent le plus le problème. Le navigateur redessine la page et peut recalculer la mise en page lorsque le contenu se déplace ; avec trop de nœuds, la fréquence d’images devient insuffisante pour assurer une animation fluide.

Le résultat est un défilement saccadé et lent, qui donne l’impression que l’interface ne répond pas, quelle que soit la rapidité du reste de l’application.

Vous pouvez confirmer le problème dans le panneau Mémoire des outils de développement du navigateur, qui indique le nombre de nœuds DOM présents sur la page. Une liste qui crée des milliers de nœuds se repère clairement ici.

Observer ce nombre augmenter rapidement à mesure que vous rendez davantage d’éléments vous apporte une preuve concrète que la taille du DOM est le goulot d’étranglement.

La virtualisation, parfois appelée fenêtrage, ne rend que les éléments actuellement visibles et un petit tampon, plutôt que la liste entière. Lorsque vous faites défiler la page, les éléments qui entrent dans la fenêtre sont montés et ceux qui en sortent sont démontés.

Le DOM actif reste ainsi réduit, quel que soit le nombre d’éléments contenus dans les données, ce qui dissocie la taille du DOM de celle du jeu de données.

La fenêtre visible est déduite de la position de défilement, de la hauteur du conteneur et de la hauteur des éléments. Diviser la hauteur de la fenêtre d’affichage par celle d’un élément donne approximativement le nombre de lignes visibles, et le décalage de défilement indique lesquelles.

La bibliothèque utilise ces nombres pour déterminer exactement quelle portion d’éléments rendre à chaque instant.

Plusieurs bibliothèques implémentent le fenêtrage. react-virtualized est riche en fonctionnalités, mais plus volumineuse ; react-window est une réécriture plus petite et spécialisée du même auteur ; TanStack Virtual est une option moderne sans interface.

Pour la plupart des listes, react-window offre un excellent équilibre entre simplicité et performances, ce qui explique pourquoi ce cours se concentre sur cette bibliothèque.

La virtualisation devient avantageuse pour les longues listes, généralement à partir de plusieurs centaines de lignes, ou lorsque les lignes contiennent de nombreuses images et des composants imbriqués. C’est dans ces cas que la taille du DOM nuit réellement aux performances.

Les flux infinis, les grandes tables de données et les historiques de discussion sont des scénarios typiques où le fenêtrage devient essentiel plutôt que facultatif.

Pour les listes courtes de quelques dizaines d’éléments simples, la virtualisation ajoute de la complexité sans apporter de bénéfice notable. Le positionnement absolu et le coût des mesures peuvent même avoir un effet globalement négatif.

Réservez le fenêtrage aux jeux de données réellement volumineux ; pour les petits jeux de données, un simple parcours du tableau est plus simple et parfaitement rapide.

Avec le fenêtrage, une liste de cent mille éléments ne conserve dans le DOM que les quelques éléments visibles ; le rendu initial est donc rapide, la mémoire reste peu sollicitée et le défilement est fluide.

Vous échangez un peu de complexité lors de la configuration contre des performances qui ne dépendent plus de la quantité de données, ce qui constitue la promesse centrale de la virtualisation.

Déterminez quand la virtualisation est avantageuse.

Rendre des milliers de nœuds DOM augmente le coût de mise en page, l’utilisation de la mémoire et les saccades lors du défilement ; vous pouvez le confirmer en observant le nombre de nœuds dans les outils de développement. La virtualisation ne rend que la fenêtre visible et un tampon, ce qui maintient le DOM à une taille réduite.

react-window est une solution spécialisée et légère parmi react-virtualized et TanStack Virtual. Utilisez-la pour les listes volumineuses ou lourdes, et évitez-la pour les listes courtes et simples.