Examen des problèmes de mémoire

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Utiliser le volet Memory (Mémoire) pour suivre l’utilisation de la mémoire
• Accéder à l’outil Performance monitor (Surveillance des performances) pour surveiller la taille du segment de mémoire JS et les écouteurs d’événements JS

Plantage du navigateur

L’exemple suivant peut potentiellement faire planter votre navigateur. Les fuites de mémoire dans le navigateur client peuvent ralentir l’expérience de ce dernier au point de le faire planter.

Correction du blocage ou du plantage du navigateur Chrome

Les exemples de composants Web Lightning de ce module peuvent provoquer le blocage de votre navigateur, mais il existe un outil astucieux vous permettant de fermer un onglet qui ne répond pas.

1. Dans la section des onglets du navigateur Chrome, faites un clic droit dans la zone vide et sélectionnez Task Manager (Gestionnaire de tâches).
   
2. Cliquez sur un élément dans le gestionnaire de tâches. Le bouton End Process (Arrêter le processus) devient actif.
   
3. Fermez le gestionnaire de tâches.
   
   

Nous disposons désormais d’une solution pour sortir d’un processus bloqué.

Examinons un autre exemple de situation problématique et la manière de la résoudre.

Écouteurs d’événements excessifs

1. Avec l’application Bad Network ouverte, sélectionnez Example 2: Count Clicks (Exemple 2 : compter les clics).
2. Cliquez sur Click Me (Cliquez ici) à plusieurs reprises jusqu’à ce que la réponse du compteur ralentisse. Le décompte est irrégulier et ne correspond pas au nombre de clics. La couleur change également. Utilisons l’outil Performance monitor (Surveillance des performances) pour analyser ce problème.
3. Actualisez la page.
4. Dans DevTools, cliquez sur l’icône Customize and control DevTools (Personnaliser et contrôler les Outils de développement) () pour développer le menu, puis cliquez sur More tools (Autres outils) > Performance monitor (Surveillance des performances).

   

   L’outil Performance monitor (Surveillance des performances) suit les performances au fil du temps. Nous pouvons surveiller les modifications à mesure que nous interagissons avec la page.

5. Sélectionnez les options JS heap size (Taille du segment de mémoire JS) et JS event listeners (Écouteurs d’événements JS) de sorte qu’elles affichent des résultats.
   

   Notez le nombre d’écouteurs d’événements JavaScript. Les graphiques peuvent prendre un peu de temps pour afficher les modifications de la page. Gardez bien un œil sur les métriques CPU usage (Utilisation du processeur), JS heap size (Taille du segment de mémoire JS), DOM Nodes (Nœuds DOM) et JS event listeners (Écouteurs d’événements JS).

6. Cliquez sur Click Me (Cliquez ici) à plusieurs reprises. Notez que l’utilisation du processeur reste stable. Le nombre de nœuds DOM reste également stable. Cependant, la taille du segment de mémoire JS et le nombre d’écouteurs d’événements JS augmentent considérablement.
   

Examinons les informations fournies par DevTools pour vous aider à suivre la taille du segment de mémoire JS.

Utilisation du volet Memory (Mémoire)

1. Fermez l’outil Performance monitor (Surveillance des performances).
2. Dans le menu de DevTools, sélectionnez l’onglet Memory (Mémoire).
   
3. Actualisez la page pour commencer avec un nouvel exemple.
   Cela vous permet de capturer dans un cliché instantané une référence servant de base de comparaison.
4. Dans le volet Memory (Mémoire), cliquez sur Take snapshot (Réaliser un instantané).
5. Attendez que le cliché instantané soit créé et affiché. (Cette opération peut prendre quelques minutes en fonction de la vitesse de votre navigateur.)
   
6. Cliquez sur Click Me (Cliquez ici) jusqu’à ce que la réponse du compteur ralentisse comme auparavant.
7. Sélectionnez l’en-tête Profiles (Profils) et cliquez sur Take snapshot (Réaliser un instantané) pour créer un cliché instantané.
8. Attendez que le cliché instantané soit créé. Il s’affiche sous le premier cliché instantané. La taille a augmenté de 20,5 Mo du cliché instantané 1 (95,5 Mo) au cliché instantané 2 (116 Mo). La taille de vos clichés instantanés peut différer de celles-ci.
   

Comparaison des deux clichés instantanés

1. Dans le menu Memory (Mémoire), depuis la liste Perspective (actuellement définie sur Summary [Résumé]), sélectionnez Comparison (Comparaison).

   

   Par défaut, Chrome effectue une comparaison avec le cliché instantané précédent, mais vous pouvez effectuer une comparaison avec un autre cliché instantané en le sélectionnant dans la liste déroulante située au-dessus des données. Chaque ligne montre la différence par élément entre les deux clichés instantanés.

   
   
2. Sélectionnez l’en-tête de colonne Size Delta (Delta de la taille) pour trier en fonction du delta de la taille. En cliquant sur l’en-tête, vous parcourez les options de tri.
3. Effectuez un tri du plus grand au plus petit.
   

   Faites défiler la colonne Constructor (Constructeur). Notez qu’il y a principalement des éléments système avant le constructeur SomeObj. Ici, 6 142 SomeObjs ont été créés. C’est un nombre considérable.

   

   Vous pouvez utiliser le filtre Class (Classe) pour rechercher SomeObj.

4. Développez l’événement SomeObj pour l’ouvrir et voir toutes les instances de SomeObj.
   

   Le constructeur JavaScript de l’événement SomeObj en mémoire est répertorié pour chaque instance de SomeObj. Ici, il s’agit du fichier example2_CountClicks.js, à la ligne 63.

5. Sélectionnez un événement SomeObj pour afficher ses informations dans le volet Object (Objet). (Le volet Object [Objet] se trouve sous le volet Constructor [Constructeur] et le volet Retainers [Éléments de conservation].)
   

   Dans les informations du volet Object (Objet), sur la deuxième ligne, le premier contexte affiche le fichier et l’emplacement de l’appel permettant de générer l’objet : example2_CountClicks.js, à la ligne 81.

6. Cliquez sur le lien exemple2_CountClicks.js pour ouvrir le fichier dans le volet Sources.
   

   La ligne 81 se trouve dans la méthode listenForEvent, qui crée une instance de SomeObj, puis l’utilise dans addEventListener dans le cadre d’un événement de clic. Ainsi, chaque fois que le corps reçoit un clic, un autre EventListener relatif à l’événement de clic est ajouté au corps. Le problème est que les écouteurs ne sont jamais nettoyés, ce qui engendre une fuite de mémoire.

   

   Un autre problème ici est que le code ajoute directement l’écouteur d’événement à l’élément document.body. Cela n’est pas recommandé.

   Vous pouvez également voir les EventListeners dans l’onglet Elements (Éléments).

7. Sélectionnez l’onglet Elements (Éléments).
8. Sélectionnez la balise body, puis sélectionnez Event Listeners (Écouteurs d’événements).
   
9. Développez l’événement click (clic).

   

   Voici tous les écouteurs (dans le corps) qui ont été ajoutés par tous les clics. Il s’agit là d’une fuite de mémoire classique. Cela peut ralentir le navigateur et le faire planter.

Soyez prudent en ajoutant des écouteurs d’événements. Le bon nettoyage des écouteurs fait partie intégrante de la création de composants Web Lightning efficaces. Pour en savoir plus sur les événements et les écouteurs, consultez la section Ressources.

Vous savez maintenant comment utiliser certains des outils de développement disponibles dans les navigateurs Web. Employez-les pour étudier les problèmes de réseau et de mémoire lorsque vous procédez au dépannage de composants Web Lightning.

Ressources

• MDN Web Docs : EventTarget.addEventListener()
• Guide du développeur de composants Web Lightning : Exécution de code lors de l’affichage d’un composant
• Guide du développeur de composants Web Lightning : Création et répartition d’événements
• Guide du développeur de composants Web Lightning : Accès aux éléments appartenant au composant