Analyser la réactivité de l'interface utilisateur dans les applications du Windows Store (XAML)

Utilisez le profileur Réactivité de l'interface utilisateur XAML pour les applications Windows Store afin de rechercher et corriger les problèmes de performances liés au traitement et au rendu XAML. Les longs temps de démarrage et de navigation, le panoramique et le défilement inégaux, et les retards lors du traitement de l'entrée d'utilisateur sont quelques-uns des problèmes que l'outil peut vous aider à analyser.

Notes

Vous pouvez collecter et analyser les données d'utilisation de l'UC et de consommation d'énergie en même temps que les données de réactivité de l'interface utilisateur XAML.Consultez Exécuter les outils d'analyse à partir de la page Performances et diagnostics.

Sommaire

Identifier les scénarios avec des marques utilisateur

Collecter les données de réactivité de l'interface utilisateur pour votre application

Collecter les données de réactivité de l'interface utilisateur pour une application installée

Analyser les données de réactivité de l'interface utilisateur

Optimiser la réactivité XAML

Identifier les scénarios avec des marques utilisateur

Vous pouvez ajouter des marques utilisateur à vos données de profilage pour vous aider à identifier des zones dans la chronologie.

La marque apparaît sous la forme d'un triangle orange dans la chronologie lorsque la méthode est exécutée. Le message et l'heure s'affichent sous la forme d'une info-bulle lorsque vous pointez sur la marque. Si plusieurs marques utilisateur sont proches, les marques sont fusionnées et les données de l'info-bulle sont rassemblées. Vous pouvez effectuer un zoom avant sur la chronologie pour dissocier les marques.

Pour ajouter une marque utilisateur à du code C#, Visual Basic ou C++, commencez par créer un objet Windows.Foundation.Diagnostics LoggingChannel. Insérez ensuite des appels aux méthodes LoggingChannel.LogMessage aux points de votre code que vous souhaitez marquer. Utilisez LoggingLevel.Information dans les appels.

Lorsque la méthode s'exécute, une marque utilisateur est ajoutée aux données de profilage, ainsi qu'un message.

Notes

• Windows.Foundation.Diagnostics.LoggingChannel implémente l'interface Windows.Foundation.IClosable (projetée en tant que System.IDisposable en C# et VB). Pour éviter la fuite des ressources du système d'exploitation, appelez Dispose() quand vous avez terminé d'utiliser un canal d'enregistrement.

• Chaque canal d'enregistrement ouvert doit avoir un nom unique.La tentative de création d'un canal d'enregistrement avec un nom identique comme un canal non supprimé entraîne une exception.

Voir l'exemple LoggingSession du SDK Windows pour obtenir plus d'informations.

Collecter les données de réactivité de l'interface utilisateur pour votre application

Vous pouvez profiler la réactivité de votre application sur l'appareil exécutant Visual Studio, le simulateur ou les émulateurs Visual Studio, ou sur un appareil distant. Consultez Exécuter des applications du Windows Store à partir de Visual Studio. Les étapes de base sont les suivantes :

1. Sélectionnez l'emplacement où l'application doit être exécutée dans la liste déroulante située en regard du bouton Démarrer le débogage de la barre d'outils Standard du débogueur.

   

2. Quand vous effectuez un profilage sur une tablette ou un PC autre que l'ordinateur exécutant Visual Studio, configurez votre projet pour un profilage à distance. Consultez Exécuter des applications du Windows Store sur un ordinateur distant à partir de Visual Studio.

3. Dans le menu Déboguer, sélectionnez Performances et diagnostics.

   

4. Choisissez Réactivité de l'interface utilisateur XAML puis choisissez Démarrer.

   Notes

   Lorsque vous démarrez le profileur Réactivité de l'interface utilisateur XAML, une fenêtre de contrôle de compte d'utilisateur peut s'afficher et vous demander l'autorisation d'exécuter VsEtwCollector.exe.Cliquez sur Oui.

5. Exécutez votre application pour collecter des données.

   Conseil

   Exécutez l'application directement sur le périphérique.Les performances de l'application observées sur le simulateur ou via une connexion Bureau à distance peuvent ne pas être représentatives des performances réelles sur le périphérique.

6. Pour arrêter le profilage, rebasculez vers Visual Studio (Alt + Tab) et cliquez sur Arrêter la collecte sur la page Performances et diagnostics.

   

   Visual Studio analyse les données collectées et affiche les résultats.

   

Collecter les données de réactivité de l'interface utilisateur pour une application installée

Le profileur Réactivité de l'interface utilisateur XAML peut uniquement être exécuté sur les applications du Windows Store pour Windows 8.1 lancées à partir d'une solution Visual Studio ou installées depuis Windows Store. Lorsqu'une solution est ouverte dans Visual Studio, la cible par défaut est le Projet de démarrage. Vous pouvez profiler la réactivité XAML pour une application installée sur le périphérique local ou sur un périphérique distant sans solution ouverte.

Pour cibler une application installée :

1. Sélectionnez Modifier la cible, puis Application installée.

   

2. Profilage à distance. Pour exécuter le profileur de réactivité XAML sur un appareil distant, les outils de contrôle à distance Visual Studio doivent être installés et s'exécuter sur l'appareil. Consultez Exécuter des applications du Windows Store sur un ordinateur distant à partir de Visual Studio.

   Dans la boîte de dialogue Sélectionner le package d'application installé, sélectionnez Ordinateur distant, puis spécifiez le périphérique distant.

   

3. Dans la liste Packages d'application installés pour la session active, sélectionnez l'application cible.

   

4. Sélectionnez Réactivité de l'interface utilisateur XAML dans la page Performances et diagnostics.

5. Sélectionnez Démarrer pour commencer le profilage.

Pour arrêter le profilage, rebasculez vers Visual Studio (Alt + Tab) et cliquez sur Arrêter la collecte sur la page du hub de diagnostic.

Analyser les données de réactivité de l'interface utilisateur

Diagnostic session timeline**|UI Thread utilization|Visual throughput (FPS)|Parsing view|**Hot Elements view

Après avoir collecté les données de profilage, vous pouvez utiliser la procédure suivante pour démarrer votre analyse :

1. Examinez les informations contenues dans les graphiques Utilisation du thread d'interface utilisateur et Débit visuel (i/s), puis utilisez les barres de navigation de la chronologie pour sélectionner une plage horaire que vous souhaitez analyser.

2. À l'aide des informations contenues dans les graphiques Utilisation du thread d'interface utilisateur ou Débit visuel (i/s), examinez les informations figurant dans les vues Analyse ou Éléments réactifs pour déterminer les causes possibles du manque de réactivité apparent.

Chronologie de la session de diagnostic

La règle en haut de la page Performances et diagnostics montre la chronologie correspondant aux informations profilées. Cette chronologie s'applique aux graphiques Utilisation du thread d'interface utilisateur et Débit visuel. Vous pouvez limiter la portée du rapport en faisant glisser les barres de navigation sur la chronologie pour sélectionner un segment de la chronologie.

La chronologie affiche également les marques utilisateur que vous avez insérées, ainsi que les événements du cycle de vie de l'activation de l'application.

Utilisation du thread d'interface utilisateur

Le graphique Utilisation du thread d'interface utilisateur (%) affiche la durée relative passée dans le thread d'interface utilisateur pour ces catégories :

Analyse	Indique le temps passé dans le thread d'interface utilisateur à analyser le XAML et à récupérer les ressources d'application.
Disposition	Indique le temps passé dans le thread d'interface utilisateur à disposer les éléments XAML.
Code d'application	Indique le temps passé sur le thread d'interface utilisateur qui exécute le code d'application (utilisateur) qui n'est pas lié à l'analyse ou à la disposition.
Autres Xaml	Indique le temps passé dans le thread d'interface utilisateur à exécuter le code d'exécution XAML.

Débit visuel (i/s)

Le graphique linéaire Débit visuel (i/s) affiche les images par seconde (FPS) sur l'interface utilisateur et les threads de composition pour l'application. Il s'agit des valeurs qui sont affichées dans le chrome d'une application lorsque la propriété EnableFrameRateCounter est activée.

Vue Analyse

La vue Analyse contient un graphique à barres horizontales des fichiers XAML qui sont chargés et traités dans la partie sélectionnée de la chronologie. Les enfants d'un nœud de fichiers XAML sont les fichiers inclus par le fichier de nœud. Les nœuds sont répertoriés dans l'ordre dans lequel ils ont été chargés. Le volet d'informations affiche ces valeurs pour un fichier sélectionné.

Valeurs inclusives et exclusives

Durée exclusive	Temps nécessaire pour traiter les éléments définis explicitement dans ce nœud.
Durée inclusive	Temps nécessaire pour traiter les éléments définis dans ce nœud et dans tous les nœuds enfants.
Éléments d'interface utilisateur (exclusifs)	Nombre d'éléments définis explicitement dans ce nœud.
Éléments d'interface utilisateur (inclusifs)	Nombre d'éléments définis explicitement dans ce nœud et dans tous les nœuds enfants.

Vue Éléments réactifs

La vue Éléments réactifs contient un graphique à barres horizontales qui représente tous les éléments qui participent à la disposition pendant la partie sélectionnée dans la chronologie. Les éléments sont regroupés selon leur modèle et triés par ordre décroissant par le temps nécessaire pour la disposition.

Les enfants d'un nœud d'élément sont les éléments contenus par l'élément du nœud parent. Les nœuds enfants sont également classés par durée de disposition. La vue des détails affiche les valeurs de nom et de synchronisation pour un élément sélectionné.

Optimiser la réactivité XAML

Les rubriques de Performance best practices for Windows Store apps using C++, C#, and Visual Basic se situent parmi les meilleures ressources pour trouver des informations sur l'optimisation des performances de votre application.

Voici quelques idées concernant l'optimisation des performances XAML :

Optimiser la mise en route et la navigation entre les pages

Vous pouvez accélérer la mise en route de votre application et la navigation entre les pages en examinant attentivement les fichiers XAML, les fichiers de ressources et les fichiers de données chargés par vos pages. Votre application peut paraître lente si les fichiers XAML créent ou référencent un grand nombre d'éléments d'interface utilisateur qui ne sont pas nécessaires lors du premier chargement de la page, que des fichiers de ressources sont chargés qui référencent des modèles et des styles non applicables à la page actuelle ou que le même code XAML ou fichier de ressources est chargé plusieurs fois. Pour connaître les techniques disponibles pour répondre à ces problèmes, consultez l'une des rubriques ci-dessous.

• Optimize loading XAML (Windows Store apps using C#/VB/C++ and XAML)

• Minimize startup time (Windows Store apps using C#/VB/C++ and XAML)

• Access the file system efficiently (Windows Store apps using C#/VB/C++ and XAML)

Optimiser le panoramique et le défilement

Des problèmes de performances de panoramique et de défilement peuvent se produire lorsqu'aucun conteneur de virtualisation n'est utilisé, avec des modèles volumineux et complexes ou des algorithmes inefficaces dans les méthodes de rappel image par image personnalisées. Pour connaître les techniques disponibles pour répondre à ces problèmes, consultez l'une des rubriques ci-dessous.

• Load, store, and display large sets of data efficiently (Windows Store apps using C#/VB/C++ and XAML)

• Make animations smooth (Windows Store apps using C#/VB/C++ and XAML)

Optimiser la réactivité d'entrée

Pour connaître les techniques disponibles pour répondre à ces problèmes, consultez Keep the UI thread responsive (Windows Store apps using C#/VB/C++ and XAML)