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:
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
ouReact.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.