Déboguer les fuites de mémoire DOM avec l’outil Éléments détachés

Utilisez l’outil Éléments détachés pour rechercher les éléments détachés que le navigateur ne peut pas collecter de mémoire et localiser l’objet JavaScript qui fait toujours référence à l’élément détaché. En modifiant votre Code JavaScript pour libérer l’élément, vous réduisez le nombre d’éléments détachés sur votre page.

Une fuite de mémoire peut se produire dans votre application lorsqu’un élément n’est plus attaché à l’arborescence DOM (Document Object Model), mais qu’il est toujours référencé par un code JavaScript exécuté sur la page. Ces éléments sont appelés éléments détachés. Pour que le navigateur collecte la mémoire (GC) l’élément détaché, l’élément ne doit pas être référencé à partir de l’arborescence DOM ni à partir du code JavaScript.

Pour plus d’informations sur les instantanés de tas et les éléments détachés, consultez Découvrir les fuites de mémoire de l’arborescence DOM détachée avec les instantanés de tas.

Comme expliqué dans Résoudre les problèmes de mémoire, les problèmes de mémoire affectent les performances des pages, notamment les fuites de mémoire, les surcharges de mémoire et les nettoyages de mémoire fréquents. Les symptômes pour vos utilisateurs sont les suivants :

• Les performances d’une page s’aggravent progressivement au fil du temps.
• Les performances d’une page sont constamment mauvaises.
• Les performances d’une page sont retardées ou semblent s’interrompre fréquemment.

Vidéo : Déboguer des fuites de mémoire avec l’outil Microsoft Edge Detached Elements

Ouvrir l’outil Éléments détachés

Pour ouvrir l’outil Éléments détachés et charger la page de démonstration :

1. Ouvrez l’application de démonstration Éléments détachés dans une nouvelle fenêtre ou un nouvel onglet.

2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Éléments détachés . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils () :

   

Obtenir des éléments détachés

Le bouton Obtenir des éléments détachés () dans l’outil Éléments détachés recherche et affiche tous les éléments détachés sur une page web.

Pour rechercher des éléments détachés :

1. Dans l’application de démonstration, vérifiez que le bouton Salle 1 est sélectionné.

2. Dans l’application de démonstration, cliquez sur le bouton Trafic rapide .

3. Une fois que des messages ont été générés et affichés dans l’application de démonstration, cliquez sur le bouton Arrêter de la démonstration :

   

4. Cliquez sur le bouton Salle 2 :

5. Dans l’outil Éléments détachés , cliquez sur l’icône Obtenir des éléments détachés ().

   L’outil Éléments détachés affiche tous les éléments détachés de la page. Lorsque vous basculez vers la salle 2 dans l’application de démonstration, les messages générés dans la salle 1 ne sont plus attachés au DOM, mais ils sont toujours référencés par JavaScript :

   

Déclencher le garbage collection

Ensuite, déclenchez le garbage collection (GC) dans le navigateur :

1. Dans l’outil Éléments détachés , cliquez sur l’icône Collecter la mémoire ( .

2. Cliquez sur l’icône Obtenir des éléments détachés ().

Lorsque vous sélectionnez Collecter la mémoire, le navigateur exécute le garbage collection. Lorsque vous sélectionnez Obtenir des éléments détachés, l’outil Éléments détachés affiche tous les éléments détachés qui ne peuvent pas être récupérés par la mémoire. Ces éléments détachés peuvent être des fuites de mémoire s’ils ne sont pas réutilisés par l’application.

Identifier le code JavaScript qui conserve les éléments détachés

Une fois que vous avez trouvé un élément détaché qui ne peut pas être récupéré par la mémoire, vous pouvez utiliser le bouton Analyser () de l’outil Éléments détachés pour identifier le code JavaScript en cours d’exécution sur la page qui fait toujours référence à l’élément détaché. Le bouton Analyser prend un instantané de tas et remplit l’ID de l’élément détaché avec son emplacement dans le tas.

Pour plus d’informations sur les instantanés de tas, consultez Enregistrer des instantanés de tas à l’aide de l’outil Mémoire.

Pour identifier le code JavaScript qui fait référence à un élément détaché :

1. Dans l’outil Éléments détachés , cliquez sur l’icône Analyser ().

   L’outil Mémoire s’ouvre dans la barre d’outils Affichage rapide, en bas de DevTools :

   

2. Dans l’outil Éléments détachés , sélectionnez le champ Id d’un élément détaché.

   L’outil Mémoire sélectionne automatiquement l’objet dans le tas qui fait référence à l’élément détaché. Nous appelons ces objets Des rétentions :

   

3. Dans l’outil Mémoire , sélectionnez le lien room.js:13.

   L’outil Sources s’ouvre dans la barre d’activité et affiche la ligne 13 du fichier room.js.

4. Dans la hide() fonction de room.js, le code JavaScript de l’application de démonstration ajoute chaque message de la salle à un unmounted tableau. Le unmounted tableau est l’objet qui fait référence à l’élément détaché :

   

Vous avez maintenant identifié la rétention qui empêche l’élément détaché d’être récupéré par le navigateur !

Identifier le nœud DOM à l’origine de la conservation d’autres nœuds

Étant donné que le DOM est un graphe entièrement connecté, lorsqu’un nœud DOM est conservé en mémoire par JavaScript, il peut entraîner la conservation d’autres nœuds DOM avec celui-ci.

Pour identifier le nœud coupable dans une arborescence détachée qui entraîne la conservation de l’arborescence entière :

1. Cliquez sur l’icône Détacher des éléments () pour détruire les liens parent-enfant à l’intérieur de l’arborescence détachée.

2. Cliquez sur l’icône Collecter la mémoire ( .

   Les liens parent-enfant sont supprimés à l’intérieur de l’arborescence détachée :

   

Remplacer la cible sélectionnée par une autre origine

Vous pouvez rechercher des éléments détachés de différentes origines ou images à l’aide de la liste déroulante Cible sélectionnée .

1. Cliquez sur la liste déroulante Cible sélectionnée :

   

2. Sélectionnez une autre origine.

La nouvelle origine s’affiche dans l’outil Éléments détachés .

Considérations supplémentaires

Lorsque vous recherchez des fuites de mémoire, n’oubliez pas que les fuites peuvent dépendre du contexte de votre application. Pour l’application de démonstration, vous avez trouvé des éléments détachés qui n’ont pas pu être récupérés par le navigateur, et vous avez identifié le Code JavaScript qui conserve les éléments détachés. Toutefois, dans le contexte de l’application de démonstration, il est judicieux de conserver la liste des messages de conversation, afin que si un utilisateur revient à la salle 1, le journal des messages soit conservé.

L’image suivante montre des éléments détachés sous la forme de messages qui sont attachés lorsqu’un utilisateur accède de la salle 2 à la salle 1 :

De même, un flux dans les réseaux sociaux peut détacher des éléments lorsque les utilisateurs défilent au-dessus d’eux, et les rattacher au DOM lorsque les utilisateurs effectuent un défilement vers le haut. Les éléments détachés ne sont pas toujours une indication d’une fuite de mémoire, et les fuites de mémoire ne sont pas toujours provoquées par des éléments détachés.

Pour les applications de longue durée, de petites fuites de mémoire de quelques kilo-octets seulement peuvent dégrader sensiblement les performances au fil du temps. Les développeurs web qui utilisent l’infrastructure React savent que React gère une copie virtualisée du DOM. Le fait de ne pas démonter correctement les composants peut entraîner la fuite d’une application dans de grandes parties du DOM virtuel.

Cette application de démonstration et ses fuites sont artificielles. Testez l’outil Éléments détachés sur votre application ou site web de production. Si vous rencontrez des problèmes potentiels avec l’outil Éléments détachés, contactez l’équipe Microsoft Edge DevTools pour envoyer des commentaires sur l’outil Éléments détachés et le débogage des fuites de mémoire.