Un guide sur l’optimisation et l’amélioration des performances de la mémoire de votre application Flutter à l’aide des outils de développement Flutter

Introduction des outils de développement dans Flutter

L’outil Flutter Dev fournit une analyse approfondie des performances de l’application, de l’interface utilisateur au processeur et à l’utilisation de la mémoire de l’application. Flutter fournit un outil de profilage qui peut aider à mieux comprendre les performances d’exécution de nos applications. Pour utiliser des outils de profilage, les conditions suivantes doivent être prises en compte :

1. Le débogage doit être effectué sur des appareils physiques (iOS/Android)
2. Le périphérique de débogage doit être le périphérique doté de la prise en charge matérielle la plus faible que la plupart des utilisateurs pourraient raisonnablement utiliser.
3. L’application doit s’exécuter en mode Profil plutôt qu’en mode débogage
4. Une fois l’application exécutée dans le mode désigné, utilisez les outils de développement pour lancer nos outils nécessaires.

Comment utiliser les outils de développement

• Une fois l’application lancée, utilisez le bouton « Ouvrir les outils de développement Flutter » dans le débogueur.
• Dans la fenêtre de l’outil, l’application en cours d’exécution peut être considérée comme l’application connectée, sinon le processus peut être lié à l’outil ici.
• Nous pouvons voir plusieurs onglets qui peuvent être utilisés pour analyser notre application lorsqu’elle est en cours d’exécution.
  

  Barre d’outils

• Vue Mémoire – Les outils de mémoire sont nécessaires pour nous aider à identifier les problèmes d’utilisation de la mémoire par notre application qui peuvent entraîner un crash, une API lente/ne répond pas, afin d’identifier des fuites de mémoire suspectées. Cet outil fournit un graphique de série chronologique de l’utilisation actuelle de la mémoire. L’axe X affiche la chronologie des événements toutes les 500 ms. À partir de la légende de l’événement, nous pouvons voir ce qu’indique chaque icône du graphique. Nous pouvons survoler/sélectionner un point particulier le long de l’axe X pour affiner la vue détaillée de ce qui s’est passé dans la mémoire à ce moment-là. Les détails des points sur l’axe Y sont les suivants :
  • Tas de fléchettes/flottements – Objets (objets Dart et Flutter) dans le tas.
  • Fléchette/Flutter natif – Mémoire qui ne se trouve pas dans le tas Dart/Flutter mais qui fait toujours partie de l’empreinte mémoire totale. Les objets de cette mémoire seraient des objets natifs (par exemple, issus de la lecture d’un fichier en mémoire ou d’une image décodée). Les objets natifs sont exposés à la VM Dart à partir du système d’exploitation natif (tel qu’Android, Linux, Windows, iOS) à l’aide d’un intégrateur Dart.
  • Chronologie – Les horodatages de toutes les statistiques et événements de mémoire collectés à un moment donné (horodatage).
  • Cache raster – La taille de la ou des couches de cache raster ou des images du moteur Flutter, lors de l’exécution du rendu final après la composition.
  • Alloué – La capacité actuelle du tas est généralement légèrement supérieure à la taille totale de tous les objets du tas.
  • RSS (taille de l’ensemble résident) – La taille de l’ensemble résident affiche la quantité de mémoire pour un processus. Il n’inclut pas la mémoire échangée. Il comprend la mémoire des bibliothèques partagées chargées, ainsi que toute la mémoire de pile et de tas.
    

    Vue Mémoire

Outre la vue chronologique, Tool fournit également une analyse approfondie dans 3 sous-onglets, à savoir :

1. 1. 1. Mémoire de profil – Cette vue montre l’allocation de mémoire par classe, c’est-à-dire la mémoire allouée/utilisée par chaque classe. Pour afficher l’allocation de mémoire en temps réel, sélectionnez « Actualiser sur GC » (cela actualise la page trop fréquemment, pour éviter cela, utilisez « Actualiser » lorsque vous souhaitez afficher la table de mémoire.)
         

         Mémoire de profil
      2. Onglet Instantané différentiel – Nous devons suivre les étapes mentionnées sous cet onglet pour capturer l’instantané de mémoire sur une instance. Une fois l’instantané capturé, nous pouvons voir les différentes classes et l’allocation de mémoire sous chaque classe lors de la capture de l’instantané. Ce tableau peut être filtré ou les cellules (chaque cellule du tableau représente une classe) peuvent être sélectionnées pour voir les instances de chaque classe et allocation de mémoire. Le chemin peut également être sélectionné pour rechercher des informations supplémentaires sur cette instance.
         

         Capturer un instantané de la mémoire

      3. Instance de suivi – Utilisez l’onglet Trace Instances pour rechercher quelles méthodes allouent de la mémoire à un ensemble de classes lors de l’exécution de fonctionnalités :
         1. Sélectionnez les classes à tracer
         2. Interagissez avec votre application pour déclencher le code qui vous intéresse
         3. Appuyez sur Actualiser
         4. Sélectionnez une classe tracée
         5. Examiner les données collectées

• Vue réseau – Cette vue nous permet de voir le trafic HTTP, HTTPS et web socket de notre application. Nous pouvons sélectionner n’importe quel appel réseau dans le tableau de gauche et voir une analyse approfondie dans le tableau de droite. Nous pouvons voir les en-têtes, la réponse, la demande ainsi que les cookies liés à chaque appel réseau. Dans la section Vue d’ensemble, nous pouvons voir Timing qui affiche une barre horizontale qui, lorsque nous survolons, nous indique le temps d’attente, l’heure d’établissement de la connexion et le temps de téléchargement du contenu.

La syntaxe de la requête de filtre est décrite dans la boîte de dialogue. Vous pouvez filtrer les requêtes réseau par les clés suivantes :

1. 1. 1. méthode, m: ce filtre correspond à la valeur de la colonne « Méthode »
      2. statut, s: ce filtre correspond à la valeur de la colonne « Statut »
      3. tapez, t: ce filtre correspond à la valeur de la colonne « Type »

Ces requêtes peuvent être utilisées pour mieux affiner une recherche d’appel réseau. Comme si nous pouvions rechercher ‘statut : 404‘ pour recevoir les appels réseau qui renvoient le statut 404.
Nous pouvons également l’utiliser pour comprendre tous les appels réseau effectués au démarrage de notre application, cela nous aidera à comprendre si l’appel réseau est la raison pour laquelle notre application prend beaucoup de temps à démarrer. Les étapes pour y parvenir sont les suivantes –

1. 1. 1. Démarrez votre application en pause :
         • flutter run – démarrage-pause…
         • dart run – pause-isole-au-démarrage – observe…
      2. Ouvrez DevTools à partir de l’EDI sur lequel vous avez démarré votre application ou à partir du lien imprimé sur la ligne de commande si vous avez démarré votre application à partir de la CLI.
      3. Accédez à l’écran Réseau et assurez-vous que l’enregistrement a démarré.
      4. Reprenez votre application.
      5. Le profileur réseau enregistrera désormais tout le trafic réseau de votre application, y compris le trafic depuis le démarrage de l’application.

• Enregistrement – Cet onglet affiche les journaux de notre application. Par défaut, les journaux suivants sont capturés :
  • Événements de collecte des déchets du runtime Dart
  • Événements de framework Flutter, comme les événements de création de frame
  • sortie standard et stderr à partir des candidatures
    Les journaux douaniers peuvent être ajoutés à l’application et ils seront reflétés ici.

Pour en savoir plus sur les outils Flutter restants, veuillez vous référer à – Un guide sur l’optimisation et l’amélioration des performances de votre application Flutter à l’aide des outils de développement Flutter