Un guide sur l’optimisation et l’amélioration des performances 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 notre application. Pour utiliser les outils de profilage, les conditions suivantes doivent être prises en compte :

• Le débogage doit être effectué sur des appareils physiques (iOS/Android)
• 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.
• L’application doit s’exécuter en mode Profil plutôt qu’en mode débogage
• Une fois l’application exécutée dans le mode désigné, utilisez les outils de développement pour lancer nos outils nécessaires.

Termes utilisés

Unité de temps par image (UTF): L’appareil prend en charge différentes quantités d’images par seconde, c’est-à-dire qu’il peut atteindre 60/120 images par seconde selon le type d’appareil. Ainsi, pour 60 ips, les images doivent être rendues environ toutes les 16 ms. L’UTF est donc de 16 ms.

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.

• Inspecteur de flottement – Cet outil est utilisé pour fournir une analyse approfondie des composants de l’interface utilisateur utilisés à l’écran. Il nous montre une arborescence de widgets depuis la racine de l’application jusqu’au widget pertinent que le développeur pourrait vouloir identifier. Ici, on peut sélectionner « Sélectionner le mode Widget » pour identifier un widget particulier sur l’interface utilisateur. Par défaut, cette arborescence affichera toute l’arborescence de l’interface utilisateur de la page.
  

  Sélectionnez le mode Widget – Vue UI

Sélectionnez le mode widget – Le mode Sélectionner le widget fournit une analyse approfondie des widgets utilisés dans la vue actuelle que l’utilisateur consulte. Cela peut également être utilisé pour identifier tout composant de l’interface utilisateur et donc identifier la classe utilisée pour le configurer.

• Performance – Les appareils sont conçus pour fournir un rendu sur une image limitée chaque seconde. Lorsque cette limite de rendu est dépassée, le rendu de l’interface utilisateur commence à devenir lent et l’expérience de l’application peut cesser d’être fluide, cela peut être observé sous forme de saccades ou de décalages de l’interface utilisateur.
  

  Vue des performances – Analyse du cadre

  1. Cet onglet aide à comprendre les performances de rendu de l’interface utilisateur lorsqu’un composant de l’interface utilisateur ou une page est chargé dans l’application. L’outil affiche un graphique à barres où chaque barre représente un cadre.
  2. Nous pouvons obtenir cette vue en superposition sur l’application en utilisant le bouton « Performance Overlay ».
  3. Dans le graphique superposé, nous avons deux graphiques : le graphique du haut (marqué « GPU ») montre le temps passé par le thread raster et le graphique du bas montre le temps passé par le thread de l’interface utilisateur.
  4. Une ligne rouge dans le graphique indique un Jank, c’est-à-dire que la trame prend plus que UTF pour afficher le contenu et que le code Dart associé à cette trame est trop cher.
  5. Dans l’onglet Performances, nous pouvons cliquer sur n’importe quelle image rouge (reprenant donc UTF pour le rendu). Cela nous aidera à identifier le problème en ouvrant les sous-onglets, c’est-à-dire l’événement Raster Stats et Timeline.
  6. Nous pouvons utiliser l’option Améliorer les tests pour aider à identifier le problème du décalage. Sous Événements de la chronologie, nous pouvons suivre les événements et le temps nécessaire à chaque événement pour charger cette image. À partir de là, nous pouvons identifier l’événement le plus coûteux et essayer de réduire le temps nécessaire à son chargement. Quelques façons d’identifier les problèmes avec l’interface utilisateur sont mentionnées dans ce document. document flottant.

• Profileur de processeur – Cela aide un développeur à enregistrer et à profiler les performances du processeur. Record and Stop peut être utilisé pour enregistrer les performances du processeur pendant une période donnée. Une fois cela fait, les données de profilage seront récupérées et ensuite visibles dans plusieurs vues, c’est-à-dire Bottom Up, arbre d’appels et tableau de méthodes.
  

  Arborescence du profileur de processeur

  1. De bas en haut – Dans cette vue, la racine/le bas de toute pile d’appels signifie qu’il s’agit du dernier appel effectué, les feuilles représentent les appelants. Ainsi, lorsqu’une méthode est développée dans le tableau, elle affiche tous les appelants de cette méthode. Le temps total indiqué inclura le temps total passé par n’importe quelle méthode pour accomplir sa tâche. Pour la méthode racine, c’est le temps nécessaire à son exécution, pour les enfants, c’est le temps propre de l’appelé lorsqu’il est appelé via l’enfant. Cela aide à identifier les méthodes coûteuses dans le processeur.
  2. Arbre d’appel – Ceci montre la démonstration descendante des méthodes, chaque méthode une fois développée affichera ses appelés. Le temps total indique le temps passé par une méthode à s’exécuter et le code des méthodes qu’elle appelle. Self-time est la méthode utilisée pour exécuter uniquement son code. Cela aide à identifier les chemins coûteux dans le processeur.
  3. Tableau des méthodes – Ce tableau montre toutes les méthodes qui étaient dans la CPU pendant la durée enregistrée. Chaque méthode est répertoriée individuellement sur le tableau, nous pouvons les sélectionner et avoir un graphique d’appel pour cette méthode. Le graphique d’appel montre les appelants et les appelés d’une méthode ainsi que leurs pourcentages d’appelants/appelés respectifs. Le temps total indique ici le temps que cette méthode passe dans la pile d’appels. Le temps personnel est le temps utilisé par cette méthode pour exécuter son code.
  4. Graphique de flamme – Il s’agit de la représentation graphique de l’arborescence des appels et, comme l’arborescence des appels, elle aide à identifier le graphique le plus cher. L’option d’aide ici fournira la légende pour vous aider et comprendre comment mieux lire le graphique.

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 la mémoire de votre application Flutter à l’aide des outils de développement Flutter