Utiliser l’instrumentation d’allocation sur la chronologie (type de profilage « Allocations sur la chronologie »)

Dans l’outil Mémoire, utilisez le type de profilage Allocations sur la chronologie pour rechercher les objets qui ne sont pas correctement collectés et conserver la mémoire.

Fonctionnement de l’instrumentation d’allocation sur la chronologie

Le type de profilage Allocations sur la chronologie de l’outil Mémoire combine les informations d’instantané détaillées du profileur de tas avec la mise à jour incrémentielle et le suivi de l’outil Performances. De même, le suivi de l’allocation du tas pour les objets implique le démarrage d’un enregistrement, l’exécution d’une séquence d’actions et l’arrêt de l’enregistrement pour analyse.

Les allocations sur la chronologie prennent des instantanés de segment de mémoire périodiquement tout au long de l’enregistrement (toutes les 50 ms) et un dernier instantané à la fin de l’enregistrement.

Le nombre après est @ un ID d’objet qui est conservé dans les multiples instantanés pris pendant la session d’enregistrement. L’ID d’objet persistant permet une comparaison précise entre les états de tas. Les objets sont déplacés pendant le nettoyage de la mémoire, donc l’affichage de l’adresse d’un objet n’a aucun sens.

Activer l’instrumentation d’allocation sur la chronologie

Pour commencer à utiliser les allocations sur la chronologie :

1. Ouvrez une page web, telle que la page web de démonstration Detached Elements, dans une nouvelle fenêtre ou un nouvel onglet.

2. Cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Commande+Option+I (macOS).

   DevTools s’ouvre.

3. Dans DevTools, dans la barre d’activité, sélectionnez l’outil Mémoire ().

   Si cet onglet n’est pas visible, cliquez sur le bouton Plus d’outils (), puis sélectionnez Mémoire. L’outil Mémoire s’ouvre :

   

4. Sélectionnez le bouton d’option Allocations sur la chronologie.

   Si le bouton d’option Allocations sur la chronologie n’est pas affiché, car un profil est déjà affiché, en haut à gauche, cliquez sur Profils ().

5. Dans la partie inférieure de l’outil Mémoire , cliquez sur le bouton Démarrer .

6. Interagir avec la page web ; Par exemple, cliquez sur le bouton Trafic rapide , puis sur le bouton Arrêter sur la page web de démonstration. En fonction de ce que vous essayez d’analyser, vous pouvez soit actualiser la page, interagir avec la page ou simplement laisser la page s’exécuter.

7. Dans le coin supérieur gauche de l’outil Mémoire, cliquez sur le bouton Arrêter l’enregistrement du profil de tas (

   Un nouvel instantané est créé dans la section Chronologies d’allocation de la liste Profils :

   

Allocations d’enregistrements sur la chronologie

Dans l’outil Mémoire, utilisez le type de profilage Allocations sur la chronologie. Il s’agit de l’une des fonctionnalités de DevTools pour traquer les fuites de mémoire dans votre tas JS.

Étant donné le code suivant :

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

Chaque fois que l’utilisateur clique sur le bouton référencé dans le code, une chaîne d’un million de caractères est ajoutée au x tableau.

Pour enregistrer les allocations sur la chronologie :

1. Ouvrez une page web, par exemple une page web de démonstration.

2. Ouvrez DevTools, puis sélectionnez l’outil Mémoire .

3. Cliquez sur l’option Allocations sur la chronologie, puis sur le bouton Démarrer.

4. Effectuez l’action que vous soupçonnez d’être à l’origine de la fuite de mémoire.

5. Lorsque vous avez terminé, cliquez sur le bouton Arrêter l’enregistrement du profil de segment de mémoire .

6. Pendant l’enregistrement, notez si des barres bleues apparaissent sur l’instrumentation d’allocation sur la chronologie :

   

   Ces barres bleues représentent de nouvelles allocations de mémoire. Ces nouvelles allocations de mémoire sont vos candidates pour les fuites de mémoire.

7. Effectuez un zoom sur une barre pour filtrer le volet Constructeur afin d’afficher uniquement les objets qui ont été alloués au cours de la période spécifiée.

   

8. Développez l’objet et sélectionnez la valeur pour afficher plus de détails dans le volet Objet .

   Par exemple, dans les détails de l’objet nouvellement alloué, il est indiqué qu’il a été alloué à la x variable dans l’étendue Window :

   

Lire une chronologie d’allocation de tas

La chronologie d’allocation du tas montre où les objets sont créés et identifie le chemin de rétention. Dans la figure suivante, les barres en haut indiquent la détection de nouveaux objets dans le tas.

La hauteur de chaque barre correspond à la taille des objets récemment alloués, et la couleur des barres indique si ces objets sont toujours actifs dans l’instantané de segment de mémoire final. Les barres bleues indiquent les objets qui sont toujours actifs à la fin de la chronologie, les barres grises indiquent les objets qui ont été alloués pendant la chronologie, mais qui ont depuis été ramassés par la mémoire.

Vous pouvez utiliser les curseurs de la chronologie ci-dessus pour effectuer un zoom sur cet instantané particulier et passer en revue les objets qui ont été récemment alloués à ce stade :

Un clic sur un objet spécifique dans le tas affiche l’arborescence de rétention dans la partie inférieure de l’instantané de tas. L’examen du chemin de rétention de l’objet devrait vous donner suffisamment d’informations pour comprendre pourquoi l’objet n’a pas été collecté, et vous devriez apporter les modifications de code nécessaires pour supprimer la référence inutile.

Afficher l’allocation de mémoire par fonction

Vous pouvez afficher l’allocation de mémoire par fonction JavaScript. Voir Accélérer le runtime JavaScript (type de profilage « Échantillonnage d’allocation »).

Remarque

Certaines parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisé conformément aux conditions décrites dans la licence internationale Creative Commons Attribution 4.0. La page originale se trouve ici et est écrite par Meggin Kearney.

Ce travail est sous licence Creative Commons Attribution 4.0 International.