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

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

Fonctionnement de l’instrumentation d’allocation sur chronologie

Les allocations sur chronologie type de profilage de l’outil mémoire combinent les informations de 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 de 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 chronologie prennent des instantanés de tas régulièrement tout au long de l’enregistrement (toutes les 50 ms) et une dernière instantané à la fin de l’enregistrement.

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

Activer l’instrumentation d’allocation sur la chronologie

Pour commencer à utiliser les allocations sur chronologie :

1. Ouvrez une page web, telle que la page web de démonstration Éléments détachés, 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 Cmd+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 Autres outils (), puis sélectionnez Mémoire. L’outil Mémoire s’ouvre :

   

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

   Si le bouton d’option Allocations sur chronologie n’est pas affiché, car un profil est déjà affiché, dans le coin supérieur gauche, cliquez sur Profils ().

5. En bas 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 dans la page web de démonstration. Selon ce que vous essayez d’analyser, vous pouvez actualiser la page, interagir avec la page ou simplement laisser la page s’exécuter.

7. Dans l’angle 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 :

   

Enregistrer les allocations sur le chronologie

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

En fonction du 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 le chronologie :

1. Ouvrez une page web, telle qu’une page web de démonstration.

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

3. Cliquez sur le bouton d’option Allocations sur chronologie, puis cliquez 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 tas .

6. Lorsque vous enregistrez, notez si des barres bleues s’affichent sur l’instrumentation d’allocation sur le chronologie :

   

   Ces barres bleues représentent de nouvelles allocations de mémoire. Ces nouvelles allocations de mémoire sont vos candidats aux 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 pendant 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é, indique qu’il a été alloué à la x variable dans l’étendue Window :

   

Lire un chronologie d’allocation de tas

Le chronologie d’allocation du tas indique où les objets sont créés et identifie le chemin de conservation. Dans la figure suivante, les barres en haut indiquent quand de nouveaux objets sont trouvés 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 ou non dans le tas final instantané. 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é récupérés par la mémoire.

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

Le fait de cliquer sur un objet spécifique dans le tas montre l’arborescence de conservation dans la partie inférieure du tas instantané. L’examen du chemin de conservation de l’objet doit vous fournir suffisamment d’informations pour comprendre pourquoi l’objet n’a pas été collecté et vous devez 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. Consultez Accélérer le runtime JavaScript (« Type de profilage d’échantillonnage d’allocation ») .

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