Résoudre les problèmes de mémoire

Pour rechercher les problèmes de mémoire qui affectent les performances des pages, notamment les fuites de mémoire, les surcharges de mémoire et les nettoyages de mémoire fréquents, utilisez les outils suivants :

• Gestionnaire des tâches du navigateur Microsoft Edge.
• Case à cocher Mémoire de l’outil Performance.
• Les différents types de profilage de l’outil mémoire .

Outils pour examiner l’utilisation de la mémoire

L’outil Mémoire

L’outil mémoire est main pour examiner les problèmes de mémoire :

Un profil Éléments détachés dans l’outil Mémoire :

Pour revenir à la liste des boutons d’option pour les types de profilage, dans le coin supérieur gauche de l’outil Mémoire , cliquez sur Profils ().

Vue d’ensemble de la résolution des problèmes de mémoire

Dans l’esprit du modèle de performance RAIL , vos efforts en matière de performances doivent être axés sur vos utilisateurs.

Les problèmes de mémoire sont importants, car ils sont souvent perceptibles par les utilisateurs. Les utilisateurs peuvent percevoir les problèmes de mémoire des manières suivantes :

• Les performances d’une page s’aggravent progressivement au fil du temps. Il s’agit peut-être d’un symptôme d’une fuite de mémoire. Une fuite de mémoire se produit lorsqu’un bogue dans la page entraîne l’utilisation progressive de la mémoire par la page au fil du temps.

• Les performances d’une page sont constamment mauvaises. C’est peut-être un symptôme d’un ballonnement de la mémoire. L’hypertrophie de la mémoire se produit lorsqu’une page utilise plus de mémoire que nécessaire pour une vitesse de page optimale.

• Les performances d’une page sont retardées ou semblent s’interrompre fréquemment. Il s’agit peut-être d’un symptôme de nettoyages de la mémoire fréquents. Le garbage collection est le moment où le navigateur récupère de la mémoire. Le navigateur décide quand cela se produit. Pendant les collections, tout le script en cours d’exécution est suspendu. Par conséquent, si le navigateur collecte beaucoup la mémoire, l’exécution du script va être beaucoup suspendue.

Ballonnement de la mémoire : Combien est « trop » ?

Une fuite de mémoire est facile à définir. Si un site utilise progressivement de plus en plus de mémoire, vous avez une fuite. Mais le ballonnement de la mémoire est un peu plus difficile à épingler. Qu’est-ce qui peut être considéré comme « utiliser trop de mémoire » ?

Il n’y a pas de nombres durs ici, car différents appareils et navigateurs ont des fonctionnalités différentes. La même page qui fonctionne en douceur sur un smartphone haut de gamme peut se bloquer sur un smartphone bas de gamme.

La clé ici est d’utiliser le modèle RAIL et de vous concentrer sur vos utilisateurs. Découvrez quels appareils sont populaires auprès de vos utilisateurs, puis testez votre page sur ces appareils. Si l’expérience est systématiquement incorrecte, la page peut dépasser les capacités de mémoire de ces appareils.

Repérer les garbage collections fréquentes (Gestionnaire des tâches du navigateur Microsoft Edge, case à cocher Mémoire de l’outil performance)

Si votre page semble s’interrompre fréquemment, vous pouvez rencontrer des problèmes de garbage collection. Pour repérer le garbage collection fréquent, vous pouvez utiliser :

• Gestionnaire des tâches du navigateur Microsoft Edge. Les valeurs mémoire ou mémoire JavaScript qui augmentent et diminuent fréquemment représentent un garbage collection fréquent. Consultez Surveiller l’utilisation de la mémoire en temps réel (Gestionnaire des tâches du navigateur Microsoft Edge).

• Case à cocher Mémoire de l’outil Performance. Dans les enregistrements de mémoire des performances, les modifications fréquentes (en hausse et en baisse) apportées aux graphiques du nombre de segments de mémoire JS ou de nœuds indiquent un nettoyage de la mémoire fréquent. Consultez Afficher les métriques de mémoire dans Informations de référence sur les fonctionnalités de performances.

Une fois que vous avez identifié le problème à l’aide de l’un de ces outils, vous pouvez utiliser les allocations de l’outil mémoire sur chronologie type de profilage pour déterminer où la mémoire est allouée et quelles fonctions sont à l’origine des allocations. Consultez Utiliser l’instrumentation d’allocation sur chronologie (« Type de profilage Allocations sur chronologie ») .

Rechercher les fuites de mémoire de l’arborescence DOM à partir d’éléments détachés

Un nœud DOM est collecté par le navigateur uniquement lorsqu’il n’y a aucune référence au nœud à partir de l’arborescence DOM ou du code JavaScript en cours d’exécution sur la page. Un nœud est dit « détaché » lorsqu’il est supprimé de l’arborescence DOM, mais certains éléments JavaScript y font toujours référence. Les nœuds DOM détachés sont une cause courante des fuites de mémoire.

Outils d’examen des éléments détachés

Voir également

• Utiliser l’instrumentation d’allocation sur chronologie (type de profilage « Allocations sur chronologie »)
• Déboguer les fuites de mémoire DOM à l’aide de l’outil Éléments détachés
• Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « Tas instantané »)

Externe:

• Recherche et débogage des fuites de mémoire dans JavaScript avec Chrome DevTools - jeu de diapositives (par Gonzalo Ruiz de Villa), qui s’applique également à Microsoft Edge DevTools.

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.