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, le gonflement de la mémoire et les nettoyage fréquents de la mémoire, utilisez les outils suivants :

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

Outils d’examen de 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)
Visualisez l’utilisation de la mémoire d’une page web sur une période donnée.	Outil Performances>Case à cocher Mémoire	Visualiser les fuites de mémoire (Outil de performance : case à cocher de mémoire) dans la référence des fonctionnalités de performance.
Repérez les collectes fréquentes des ordures.	Gestionnaire des tâches du navigateur Microsoft Edge ou outil >Performances Case à cocher Mémoire	Repérez les ramasse-miettes fréquents (Gestionnaire des tâches du navigateur Microsoft Edge, case à cocher Mémoire de l’outil Performances), ci-dessous.
Inspectez le contenu de la mémoire utilisée par une page web.	Outil Mémoire>Capture instantanée du segment de mémoire	Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »)
Découvrez quels objets JavaScript sont créés sur une période de temps donnée, afin d’isoler les fuites de mémoire.	Outil Mémoire>Allocations sur la chronologie	Utiliser l’instrumentation d’allocation sur la chronologie (type de profilage « Allocations sur la chronologie »)
Découvrez quelles fonctions JavaScript allouent de la mémoire sur une période donnée. Ce type de profil présente une surcharge de performances minimale et peut être utilisé pour des opérations de longue durée.	Outil Mémoire>Échantillonnage d’allocation	Accélérer le runtime JavaScript (type de profilage « échantillonnage d’allocation »)
Rechercher les fuites de mémoire de l’arborescence DOM.	Outil Mémoire>Éléments détachés	Déboguer les fuites de mémoire DOM (type de profilage « éléments détachés »)

Outil Mémoire

L’outil Mémoire est le principal outil permettant d’examiner les problèmes de mémoire :

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 de performance 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 de la manière suivante :

• Les performances d’une page se détériorent progressivement avec le temps. Il s’agit peut-être d’un symptôme de 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 de gonflement de la mémoire. Le problème de 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 collectes fréquentes des ordures. On parle de nettoyage de la mémoire lorsque le navigateur récupère de la mémoire. Le navigateur décide quand cela se produit. Pendant les collections, tous les scripts en cours d’exécution sont suspendus. Par conséquent, si le navigateur collecte beaucoup de déchets, l’exécution des scripts va être souvent suspendue.

Gonflement de la mémoire : combien est-ce que « trop » ?

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

Il n’y a pas de chiffres précis ici, car les différents appareils et navigateurs ont des fonctionnalités différentes. La même page qui fonctionne sans problème sur un smartphone haut de gamme peut planter 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 les appareils les plus populaires auprès de vos utilisateurs, puis testez votre page sur ces appareils. Si l’expérience est constamment mauvaise, il se peut que la page dépasse les capacités de mémoire de ces appareils.

Repérez les nettoyage fréquents de la mémoire (Gestionnaire des tâches du navigateur Microsoft Edge, case à cocher Mémoire de l’outil Performances)

Si votre page semble s’interrompre fréquemment, il se peut que vous rencontriez des problèmes de nettoyage de la mémoire. Pour repérer le nettoyage fréquent de la mémoire, vous pouvez utiliser l’une des options suivantes :

• Gestionnaire des tâches du navigateur Microsoft Edge. Montant et descendant fréquemment Mémoire ou JavaScript Les valeurs de mémoire représentent un nettoyage fréquent de la mémoire. Voir Surveiller l’utilisation de la mémoire en temps réel (Gestionnaire des tâches du navigateur).

• Case à cocher Mémoire de l’outil Performances. Dans les enregistrements de mémoire de performance, des modifications fréquentes (à la hausse ou à la baisse) apportées au tas JS ou aux graphiques de nombre de nœuds indiquent un nettoyage fréquent de la mémoire. Voir Afficher les métriques de mémoire dans la référence des fonctionnalités de performances.

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

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

Un nœud DOM est uniquement récupéré par le navigateur lorsqu’il n’y a aucune référence au nœud provenant de l’arborescence DOM ou du code JavaScript exécuté sur la page. Un nœud est dit « détaché » lorsqu’il est supprimé de l’arborescence DOM, mais certains JavaScript le référencent encore. Les nœuds DOM détachés sont une cause fréquente de fuites de mémoire.

Outils pour examiner les é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.	Outil> Mémoire Type > de profilage d’instantané de segment de mémoireDétaché	Rechercher les fuites de mémoire de l’arborescence DOM (type > de profilage « instantané de tas » détaché) dans Enregistrer des instantanés de tas à l’aide de l’outil Mémoire (type de profilage « instantané de tas »).#

Voir également

• Utiliser l’instrumentation d’allocation sur la chronologie (type de profilage « Allocations sur la chronologie »)
• Enregistrer des instantanés de segment de mémoire à l’aide de l’outil Mémoire (type de profilage « instantané de tas »)

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 écrite par Kayce Basques.

Ce travail est sous licence Creative Commons Attribution 4.0 International.