Évitez une taille de DOM excessive

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

  • Efficacité du réseau et performances de charge

    Une grande arborescence DOM inclut souvent de nombreux nœuds qui ne sont pas visibles lorsque l'utilisateur charge la page pour la première fois, ce qui augmente inutilement le coût des 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 grande arborescence DOM associée à des règles de style complexes peut ralentir considérablement l'affichage.

  • 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 pouvez stocker à votre insu des références à un très grand nombre de nœuds, ce qui peut surcharger les capacités de mémoire des appareils de vos utilisateurs.

Échec de l'audit de la taille du DOM de 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:

Capture d'écran de Lighthouse pour éviter un audit excessif de la taille du DOM

Lighthouse signale les pages à l'aide d'arborescences DOM qui:

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

Optimiser la taille du DOM

En général, recherchez des moyens de créer des nœuds DOM uniquement lorsque vous en avez besoin et de les détruire lorsqu'ils ne sont plus nécessaires.

Si vous expédiez actuellement une grande arborescence DOM, essayez de charger votre page et de noter manuellement les nœuds affichés. Vous pouvez peut-être supprimer les nœuds non affichés du document chargé initialement et les créer uniquement après une interaction utilisateur pertinente, comme un défilement ou un clic sur un bouton.

Si vous créez des nœuds DOM au moment de l'exécution, l'option Subtree Modification DOM Change Breakpoints (Points d'arrêt de modification du DOM de sous-arborescence) peut vous aider à déterminer à quel moment les nœuds sont créés.

Si vous ne pouvez pas éviter une grande arborescence DOM, une autre approche pour améliorer les performances d'affichage consiste à simplifier vos sélecteurs CSS. Pour en savoir plus, consultez l'article Réduire l'étendue et la complexité des calculs de style de Google.

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.

Réagir

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

Ressources