Condividi tramite


Analizzare la velocità di risposta dell'interfaccia utente nelle app dello Store (XAML)

Si applica a Windows e Windows Phone

Usa il profiler Velocità di risposta interfaccia utente XAML delle app di Windows Store per individuare e correggere i problemi di prestazioni correlati all'elaborazione e al rendering XAML. Tempi di avvio e navigazione lunghi, panoramica e scorrimento non uniformi e ritardi nell'elaborazione dell'input dell'utente sono alcuni dei problemi che lo strumento può consentire di analizzare.

Nota

Puoi raccogliere e analizzare i dati di utilizzo della CPU e del consumo di energia insieme ai dati sulla velocità di risposta dell'interfaccia utente XAML.Vedere Eseguire strumenti di analisi dalla pagina Prestazioni e diagnostica

Contenuto

Identificare gli scenari con i contrassegni utente

Raccogliere i dati sulla velocità di risposta dell'interfaccia utente per l'app

Raccogliere i dati sulla velocità di risposta dell'interfaccia utente per un'app installata

Analizzare i dati sulla velocità di risposta dell'interfaccia utente

Ottimizzare la velocità di risposta XAML

Identificare gli scenari con i contrassegni utente

Puoi aggiungere contrassegni utente ai dati di profilatura per identificare aree nel righello della sequenza temporale.

Contrassegni utente nella sequenza temporale

Il contrassegno viene visualizzato come triangolo arancione nella sequenza temporale in corrispondenza del momento in cui il metodo viene eseguito. Il messaggio e l'ora vengono visualizzati come descrizione comando quando passi il puntatore del mouse sul contrassegno. Se due o più contrassegni utente sono vicini, i contrassegni vengono uniti e i dati della descrizione comando vengono combinati. Puoi eseguire lo zoom avanti nella sequenza temporale per separare i contrassegni.

Per aggiungere un contrassegno utente al codice C#, Visual Basic e C++, crea innanzitutto un oggetto Windows.Foundation.Diagnostics LoggingChannel. In secondo luogo, inserisci chiamate ai metodi LoggingChannel.LogMessage in corrispondenza dei punti nel codice che desideri contrassegnare. Usa LoggingLevel.Information nelle chiamate.

Quando il metodo viene eseguito, un contrassegno utente viene aggiunto ai dati di profilatura con un messaggio.

Nota

  • Windows.Foundation.Diagnostics.LoggingChannel implementa l'interfaccia Windows.Foundation.IClosable (proiettata come System.IDisposable in C# e VB). Per evitare il consumo eccessivo di risorse del sistema operativo, chiama Dispose() quando non usi più un canale di registrazione.

  • Ogni canale di registrazione aperto deve avere un nome univoco.Il tentativo di creare un nuovo canale di registrazione con lo stesso nome di un canale non eliminato causa un'eccezione.

Per esempi, fai riferimento all'Esempio LoggingSession in Windows SDK Sample.

Raccogliere i dati sulla velocità di risposta dell'interfaccia utente per l'app

Puoi profilare la velocità di risposta dell'app sul dispositivo Visual Studio, sul simulatore o gli emulatori di Visual Studio, o su un dispositivo remoto. Vedere Eseguire app dello Store da Visual Studio. Di seguito sono riportati i passaggi di base:

  1. Scegli dove desideri eseguire l'app nell'elenco a discesa accanto al pulsante Avvia debug sulla barra degli strumenti Standard del debugger.

    Esecuzione nel simulatore

  2. Durante la profilatura di un tablet o un PC diverso dal computer con Visual Studio, configura il progetto per la profilatura remota. Vedere Eseguire app di Windows Store in un computer remoto da Visual Studio

  3. Scegli Prestazioni e diagnostica dal menu Debug.

    Scegliere il profiler XAML nell'hub diagnostica

  4. Scegli Velocità di risposta UI XAML, quindi Avvia.

    Nota

    Quando avvii il profiler Velocità di risposta UI XAML, potresti visualizzare la finestra Controllo dell'account utente che richiede l'autorizzazione a eseguire VsEtwCollector.exe.Scegliere .

  5. Esegui l'app per raccogliere i dati.

    Suggerimento

    Esegui l'app direttamente sul dispositivo.Le prestazioni dell'app osservate nel simulatore o tramite una connessione desktop remoto potrebbero non essere indicative delle prestazioni effettive nel dispositivo.

  6. Per interrompere la profilatura, passa di nuovo a Visual Studio (ALT+TAB) e scegli Arresta raccolta nella pagina Prestazioni e diagnostica.

    Arrestare la raccolta dati

    Visual Studio consente di analizzare i dati raccolti e di visualizzare i risultati.

    Pagina del report del livello di reazione dell'interfaccia utente XAML

Raccogliere i dati sulla velocità di risposta dell'interfaccia utente per un'app installata

Il profiler Velocità di risposta UI XAML può essere eseguito solo nelle app di Window Store 8.1 avviate da una soluzione di Visual Studio o installate da Window Store. Quando una soluzione viene aperta in Visual Studio, la destinazione predefinita è Progetto di avvio. Puoi profilare la velocità di risposta XAML per un'app installata nel dispositivo locale o remoto senza una soluzione aperta.

Per indirizzare un'app installata:

  1. Scegli Cambia destinazione e App installata.

    Elenco Modifica destinazione

  2. Profilatura remota. Per eseguire il profiler velocità di risposta XAML su un dispositivo remoto, è necessario che Visual Studio Remote Tools sia installato e in esecuzione nel dispositivo. Vedere Eseguire app di Windows Store in un computer remoto da Visual Studio.

    Nella finestra di dialogo Seleziona pacchetto applicazioni installato scegli Computer remoto, quindi specifica il dispositivo remoto.

    Seleziona pacchetto di applicazioni installato per un dispositivo remoto

  3. Dall'elenco Pacchetti dell'applicazioni installati per la sessione corrente, scegli l'app di destinazione.

    Finestra di dialogo Seleziona pacchetto di applicazioni installato

  4. Scegli Velocità di risposta UI XAML nella pagina Prestazioni e diagnostica.

  5. Scegli Avvia per iniziare la profilatura.

Per interrompere la profilatura, passa di nuovo a Visual Studio (ALT+TAB) e nella pagina dell'hub di diagnostica scegli Arresta raccolta.

Analizzare i dati sulla velocità di risposta dell'interfaccia utente

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

Dopo aver raccolto i dati di profilatura, per avviare l'analisi puoi effettuare i passaggi riportati di seguito:

  1. Esamina le informazioni dei grafici Utilizzo thread UI e Velocità effettiva visuale (FPS), quindi utilizza le barre di navigazione della sequenza temporale per selezionare un intervallo di tempo che desideri analizzare.

  2. Utilizzando le informazioni dei grafici Utilizzo thread UI o velocità effettiva visuale (FPS), esamina i dettagli nelle visualizzazioni Analisi o Elementi sensibili per individuare le possibili cause di un'apparente mancanza di velocità di risposta.

Sequenza temporale della sessione di diagnostica

Sequenza temporale di Prestazioni e diagnostica

Il righello nella parte superiore della pagina Prestazioni e diagnostica mostra la sequenza temporale delle informazioni profilate. Questa sequenza temporale è applicabile sia al grafico Utilizzo thread UI che al grafico Velocità effettiva visuale. Puoi limitare l'ambito del rapporto trascinando le barre di navigazione sulla sequenza temporale per selezionare un segmento della stessa.

La sequenza temporale visualizza anche tutti i contrassegni utente inseriti e gli eventi del ciclo di vita dell'attivazione dell'app.

Utilizzo thread UI

Grafico Utilizzo CPU del thread UI

Il grafico Utilizzo thread UI (%) mostra la quantità di tempo relativo impiegato sul thread UI per queste categorie:

Analisi

Indica il tempo trascorso nel thread UI per l'analisi del codice XAML e il recupero delle risorse dell'app.

Layout

Indica il tempo trascorso nel thread UI per la definizione del layout degli elementi XAML.

Codice app

Indica il tempo trascorso nel thread UI che esegue il codice dell'applicazione (utente) che non è correlato all'analisi o al layout.

Altro Xaml

Indica il tempo trascorso nel thread UI per l'esecuzione del codice runtime XAML.

velocità effettiva visuale (FPS)

Grafico a linee Velocità effettiva visuale

Nel grafico a linee Velocità effettiva visuale (FPS) vengono visualizzati i frame al secondo (FPS) dell'interfaccia utente e il thread di composizione dell'app. I valori sono uguali a quelli visualizzati nel riquadro di un'app quando è abilitato EnableFrameRateCounter.

Visualizzazione Analisi

Finestra Analisi

La visualizzazione Analisi contiene un grafico a barre orizzontali del file XAML caricato ed elaborato nella parte selezionata della sequenza temporale. Gli elementi figlio di un nodo del file XAML sono file inclusi nel file del nodo. I nodi sono elencati in ordine di caricamento. Nel riquadro dettagli questi valori vengono visualizzati per un file selezionato.

Valori inclusivi ed esclusivi

Esclusivo durata

Il tempo impiegato per elaborare gli elementi definiti in modo esplicito in questo nodo.

Inclusivo durata

Il tempo impiegato per elaborare gli elementi definiti in questo nodo e in tutti i nodi figlio.

Elementi di interfaccia utente (esclusivi)

Il numero di elementi definiti in modo esplicito in questo nodo.

Elementi di interfaccia utente (inclusivi)

Il numero di elementi definiti in modo esplicito in questo nodo e in tutti i nodi figlio.

Visualizzazione Elementi sensibili

Finestra Elementi sensibili

La visualizzazione Elementi sensibili contiene un grafico a barre orizzontali che rappresenta tutti gli elementi che fanno parte del layout durante la parte selezionata della sequenza temporale. Gli elementi vengono raggruppati in base al modello e ordinati in ordine decrescente in base al tempo impiegato per il layout.

Gli elementi figlio di un nodo di elemento sono gli elementi contenuti dall'elemento del nodo padre. I nodi figlio vengono ordinati in base all'ora del layout. La visualizzazione dettagli consente di visualizzare i valori relativi al nome e all'intervallo per un elemento selezionato.

Ottimizzare la velocità di risposta XAML

Uno dei posti migliori in cui cercare informazioni sull'ottimizzazione delle prestazioni dell'app è costituito dagli argomenti di Performance best practices for Windows Store apps using C++, C#, and Visual Basic.

Ecco alcune informazioni su come ottimizzare le prestazioni XAML:

Ottimizza l'avvio e la navigazione delle pagine

Puoi velocizzare l'avvio e la navigazione delle pagine dell'app esaminando con attenzione i file XAML, di risorse e dati caricati dalle pagine. L'app può risultare lenta se i file XAML creano o fanno riferimento a un numero elevato di elementi dell'interfaccia utente non necessari al primo caricamento della pagina, se vengono caricati file di risorse che fanno riferimento a modelli e stili non applicabili alla pagina corrente o se il file XAML o il file di risorse vengono caricati più di una volta. Per le tecniche in grado di risolvere questi problemi, vedi uno dei seguenti argomenti:

Ottimizza la panoramica e lo scorrimento

I problemi relativi alle prestazioni di scorrimento e panoramica possono essere causati dal mancato utilizzo di un contenitore di virtualizzazione, di modelli grandi e complessi oppure da algoritmi inefficaci nei metodi di callback per frame personalizzati. Per le tecniche in grado di risolvere questi problemi, vedi uno dei seguenti argomenti:

Ottimizzare la velocità di risposta all'input

Per le tecniche in grado di risolvere questi problemi, vedi Keep the UI thread responsive (Windows Store apps using C#/VB/C++ and XAML)