Publié le 8 octobre 2025
Un grand DOM peut allonger la durée des calculs de style et des mises en page, ce qui impacte la réactivité de la page. Un grand DOM sollicite davantage la mémoire.
Un arbre DOM profond n'est pas un problème de performances en soi, mais il est le symptôme de schémas de conception qui utilisent une imbrication d'éléments inutiles.
Cet insight prend en compte l'ensemble du DOM, y compris les racines fantômes. Il ignore les nœuds DOM qui ne sont pas également des éléments. Il ignore également le contenu des <iframe>.
Ce que vous devez rechercher :
- Nombre total d'éléments : nombre total d'éléments dans le DOM de votre page.
- Profondeur du DOM : profondeur maximale de l'arborescence DOM.
- La plupart des enfants : l'élément comportant le plus d'éléments enfants.
Ignorer cet insight
Cet insight n'échoue que si un important recalcul de la mise en page ou du style dépasse une durée de 40 ms.
- Une mise à jour de mise en page importante implique plus de 100 objets de mise en page (qui sont à peu près des éléments).
- Un recalcul de style important affecte plus de 300 éléments.
En cas d'échec, dans le panneau Performances, cet insight met en évidence ces événements dans le graphique en flammes.
Pour réduire le coût de ces événements :
- Découvrez comment mesurer le coût des sélecteurs CSS et réduire la complexité des styles.
- Réduisez la profondeur du DOM en limitant l'imbrication inutile.
- Envisagez d'adopter les Web Components pour utiliser le Shadow DOM. Cela ne réduira pas la taille du DOM, mais cela réduira le coût des recalculs de style.
Conseils spécifiques à la pile
Cet insight propose également des conseils spécifiques aux piles pour les pages utilisant les technologies suivantes :
Angular
Si vous affichez de longues listes, utilisez le défilement virtuel avec le Component Dev Kit (CDK).
React
- Utilisez une bibliothèque de fenêtrage comme
react-windowpour 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,PureComponentouReact.memo. - Ignorez les effets jusqu'à ce que certaines dépendances aient changé si vous utilisez le hook
Effectpour améliorer les performances d'exécution.
Autres références
- Code source de l'insight
- Comment la taille du DOM affecte l'interactivité et ce que vous pouvez faire à ce sujet
- Minimiser l'ajustement de la mise en page
- Statistiques sur les sélecteurs dans les outils pour les développeurs Chrome
- Invalidation de style dans Blink
- Mesurer le temps de recalcul du style de mesure sur le terrain