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
| Cas d'utilisation | Outil | Article |
|---|---|---|
| Surveillez la quantité de mémoire utilisée par une page web en temps réel. | Gestionnaire des tâches du navigateur Microsoft Edge | Surveiller l’utilisation de la mémoire en temps réel (Gestionnaire des tâches du navigateur Microsoft Edge) |
| Visualiser l’utilisation de la mémoire d’une page web sur une période donnée. | Case à cocher Mémoire de l’outil >de performances | Visualiser les fuites de mémoire (Outil de performances : case à cocher Mémoire) dans Informations de référence sur les fonctionnalités de performances. |
| Repérer les garbage collections fréquentes. | Gestionnaire des tâches du navigateur Microsoft Edge ou Case à cocher Mémoire de l’outil >de performances | Repétez les garbage collections fréquentes (Gestionnaire des tâches du navigateur Microsoft Edge, case à cocher Mémoire de l’outil de performances) ci-dessous. |
| Inspectez le contenu de la mémoire utilisée par une page web. | Instantanédu tas de l’outil > mémoire | Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « Tas instantané ») |
| Découvrez quels objets JavaScript sont créés sur une période donnée, afin d’isoler les fuites de mémoire. | Allocations d’outils>mémoire sur chronologie | Utiliser l’instrumentation d’allocation sur chronologie (type de profilage « Allocations sur chronologie ») |
| Découvrez quelles fonctions JavaScript allouent de la mémoire sur une période donnée. Ce type de profil a une surcharge minimale en matière de performances et peut être utilisé pour des opérations de longue durée. | Échantillonnage del’allocation de l’outil> mémoire | Accélérer le runtime JavaScript (type de profilage « Échantillonnage d’allocation ») |
| Recherchez les fuites de mémoire de l’arborescence DOM. | Élémentsdétachés de l’outil> mémoire | Déboguer les fuites de mémoire DOM (type de profilage « Éléments détachés ») |
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
| Cas d'utilisation | Outil | Article |
|---|---|---|
| Afficher uniquement les éléments détachés, en tant que nœuds d’arborescence DOM. | > Outil mémoire- Type de profilage des éléments détachés | Déboguer les fuites de mémoire DOM (type de profilage « Éléments détachés ») |
| Afficher tous les objets en mémoire, filtrés pour afficher les éléments détachés, avec des liens vers le code source JavaScript. | Type de profilage > de l’outil> mémoire instantané détaché | Recherchez les fuites de mémoire de l’arborescence DOM (« Type de profilage > de tas instantané détaché ») dans Enregistrer des instantanés de tas à l’aide de l’outil mémoire (« Type de profilage tas instantané ») . |
| Afficher uniquement les éléments détachés, en tant que nœuds d’arborescence DOM, avec des liens vers le code source JavaScript. | Outil Éléments détachés | Déboguer les fuites de mémoire DOM à l’aide de l’outil É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.
Remarque
Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page originale se trouve ici et est créée par Kayce Basques.
Cette œuvre est concédée sous licence creative commons attribution 4.0 international.