Évitez une taille de DOM excessive

Une arborescence DOM volumineuse peut ralentir les performances de votre page de plusieurs manières:

• Efficacité du réseau et performances de charge

  Un grand arbre DOM inclut souvent de nombreux nœuds qui ne sont pas visibles lorsque l'utilisateur charge la page pour la première fois. Cela augmente inutilement les coûts de données pour vos utilisateurs et ralentit le temps de chargement.

• Performances d'exécution

  Lorsque les utilisateurs et les scripts interagissent avec votre page, le navigateur doit constamment recalculer la position et le style des nœuds. Une arborescence DOM volumineuse associée à des règles de style complexes peut ralentir considérablement le rendu et l'interactivité.

• Performances de la mémoire

  Si votre code JavaScript utilise des sélecteurs de requêtes généraux tels que document.querySelectorAll('li'), vous stockez peut-être involontairement des références à un très grand nombre de nœuds, ce qui peut submerger les capacités de mémoire des appareils de vos utilisateurs.

Échec de l'audit de la taille du DOM Lighthouse

Lighthouse indique le nombre total d'éléments DOM d'une page, la profondeur DOM maximale de la page et le nombre maximal d'éléments enfants:

Lighthouse signale les pages comportant des arborescences DOM qui:

• Avertit lorsque l'élément "body" comporte plus de 800 nœuds environ.
• Erreurs lorsque l'élément body comporte plus de 1 400 nœuds.

Optimiser la taille du DOM

En règle générale, recherchez des moyens de créer des nœuds DOM uniquement lorsque cela est nécessaire, et de les détruire lorsqu'ils ne sont plus requis.

Si vous envoyez une grande arborescence DOM, essayez de charger votre page et d'identifier manuellement les nœuds affichés. Vous pouvez éventuellement supprimer les nœuds non affichés du document initialement chargé et les créer uniquement après une interaction pertinente de l'utilisateur, telle qu'un défilement ou un clic sur un bouton.

Si vous créez des nœuds DOM au moment de l'exécution, les points d'arrêt concernant les modifications DOM de modification de sous-arborescence peuvent vous aider à déterminer à quel moment les nœuds sont créés.

Si vous ne pouvez pas éviter une arborescence DOM volumineuse, une autre approche pour améliorer les performances de rendu consiste à simplifier vos sélecteurs CSS. Pour en savoir plus, consultez la page Réduire la portée et la complexité des calculs de style de Google.

Pour en savoir plus, consultez l'article Comment les grandes tailles de DOM affectent l'interactivité et que pouvez-vous faire à ce sujet.

Conseils spécifiques à la pile

Angular

Si vous affichez de longues listes, utilisez le défilement virtuel avec le kit de développement de composants (CDK).

React

• Utilisez une bibliothèque de fenêtrage comme react-window pour réduire au maximum le nombre de nœuds DOM créés si vous affichez de nombreux éléments répétés sur la page.
• Limitez autant que possible les nouveaux rendus inutiles avec shouldComponentUpdate, PureComponent ou React.memo.
• Ignorez les effets jusqu'à ce que certaines dépendances aient changé si vous utilisez le hook Effect pour améliorer les performances d'exécution.

Ressources

• Code source de l'audit Éviter une taille de DOM excessive
• Réduire le champ d'application et la complexité des calculs de style