Ispeziona la velocità di rendering e l'overdraw della GPU

Android include alcune opzioni per sviluppatori sul dispositivo che ti aiutano a visualizzare dove la tua app potrebbe riscontrare problemi di rendering dell'interfaccia utente, ad esempio l'esecuzione di più lavoro di rendering del necessario o l'esecuzione di operazioni di thread e GPU lunghe. Questa pagina descrive come eseguire il debug dell'overdraw della GPU e del profilo del rendering della GPU.

Per scoprire di più sulle opzioni per gli sviluppatori on-device, incluso come attivarle, leggi l'articolo Configurare le opzioni per sviluppatori on-device.

Profila la velocità di rendering della GPU

Lo strumento di rendering GPU del profilo mostra, sotto forma di istogramma a scorrimento, una rappresentazione visiva del tempo necessario per il rendering dei frame di una finestra dell'interfaccia utente rispetto a un benchmark di 16,67 ms per frame.

Sulle GPU meno potenti, il tasso di riempimento disponibile (la velocità con cui la GPU può riempire il buffer di frame) può essere piuttosto basso. Con l'aumento del numero di pixel necessari per disegnare un frame, la GPU potrebbe impiegare più tempo per elaborare i nuovi comandi e chiedere al resto del sistema di attendere finché non riesce a recuperare. Lo strumento di profilazione consente di identificare i casi in cui la GPU viene sovraccarica o viene sovraccaricata a causa di un eccessivo overdraw.

Attiva il profiler

Prima di iniziare, assicurati di utilizzare un dispositivo con Android 4.1 (livello API 16) o versioni successive e di attivare le opzioni sviluppatore. Per avviare la profilazione del rendering GPU del dispositivo mentre utilizzi la tua app, procedi nel seguente modo:

  1. Sul dispositivo, vai a Impostazioni e tocca Opzioni sviluppatore.
  2. Nella sezione Monitoraggio, seleziona Profilo GPU per il rendering o Rendering HWUI del profilo, a seconda della versione di Android in esecuzione sul dispositivo.
  3. Nella finestra di dialogo Profilo GPU rendering, scegli Sullo schermo come barre per sovrapporre i grafici allo schermo del dispositivo.
  4. Apri l'app che vuoi profilare.

Ispeziona l'output

Nell'immagine ingrandita del grafico Rendering GPU del profilo mostrato nella Figura 1, puoi vedere la sezione colorata mostrata su Android 6.0 (livello API 23).

Figura 1. Grafico di rendering GPU del profilo ingrandito.

Di seguito sono riportati alcuni aspetti da considerare in merito all'output:

  • Per ogni applicazione visibile, lo strumento mostra un grafico.
  • Ogni barra verticale lungo l'asse orizzontale rappresenta un frame e l'altezza di ogni barra verticale rappresenta il tempo impiegato dal frame per il rendering (in millisecondi).
  • La linea verde orizzontale rappresenta 16,67 millisecondi. Per raggiungere i 60 frame al secondo, la barra verticale per ciascun frame deve rimanere al di sotto di questa linea. Ogni volta che una barra supera questa linea, potrebbero verificarsi pause nelle animazioni.
  • Lo strumento evidenzia i frame che superano la soglia di 16,67 millisecondi rendendo la barra corrispondente più larga e meno trasparente.
  • Ogni barra ha componenti colorati mappati a una fase nella pipeline di rendering. Il numero di componenti varia in base al livello API del dispositivo.

La seguente tabella fornisce le descrizioni di ogni segmento di una barra verticale nell'output del profiler quando si utilizza un dispositivo con Android 6.0 e versioni successive.

Componente della barraFase di renderingDescrizione
Scambio buffer Rappresenta il tempo che la CPU è in attesa prima che la GPU completi il proprio lavoro. Se questa barra diventa alta, significa che l'app sta lavorando troppo sulla GPU.
Problema relativo al comando Rappresenta il tempo impiegato dal renderer 2D di Android per inviare comandi a OpenGL per disegnare e ridisegnare elenchi di visualizzazione. L'altezza di questa barra è direttamente proporzionale alla somma del tempo necessario per l'esecuzione di ciascun elenco di visualizzazione: più elenchi di visualizzazione equivalgono a una barra rossa più alta.
Sincronizza e carica Rappresenta il tempo necessario per caricare le informazioni bitmap nella GPU. Un segmento di grandi dimensioni indica che l'app sta impiegando molto tempo per caricare grandi quantità di grafica.
Disegna Rappresenta il tempo impiegato per creare e aggiornare gli elenchi di visualizzazioni della vista. Se questa parte della barra è alta, potrebbero esservi molti disegni con visualizzazioni personalizzate o molto lavoro con i metodi onDraw.
Misura / Layout Rappresenta la quantità di tempo trascorso sui callback onLayout e onMeasure nella gerarchia delle visualizzazioni. Un segmento di grandi dimensioni indica che l'elaborazione della gerarchia delle visualizzazioni richiede molto tempo.
Gestione e animazione dell'input Rappresenta il tempo necessario per valutare tutti gli animatori che sono stati eseguiti per quel frame e gestire tutti i callback di input. Se il segmento è di grandi dimensioni, potrebbe indicare che l'elaborazione di un animatore personalizzato o di un callback di input richiede troppo tempo. Anche l'associazione Visualizza durante lo scorrimento, ad esempio RecyclerView.Adapter.onBindViewHolder(), si verifica in genere durante questo segmento e costituisce una causa più comune di rallentamenti in questo segmento.
Tempi vari / Ritardo VSync Rappresenta il tempo che l'app dedica all'esecuzione di operazioni tra due frame consecutivi. Potrebbe essere un indicatore di un'eccessiva elaborazione nel thread dell'interfaccia utente che potrebbe essere trasferito a un thread diverso.

Tabella 1. Barre dei componenti in Android 6.0 e versioni successive.

Le versioni di Android tra la 4.0 (livello API 14) e la 5.0 (livello API 21) presentano segmenti blu, viola, rosso e arancione. Le versioni di Android precedenti alla 4.0 presentano solo i componenti blu, rosso e arancione. La tabella seguente mostra le barre dei componenti in Android 4.0 e 5.0.

Componente della barraFase di renderingDescrizione
Processo Rappresenta il tempo che la CPU è in attesa prima che la GPU completi il proprio lavoro. Se questa barra diventa alta, significa che l'app sta lavorando troppo sulla GPU.
Esegui Rappresenta il tempo impiegato dal renderer 2D di Android per inviare comandi a OpenGL per disegnare e ridisegnare elenchi di visualizzazione. L'altezza di questa barra è direttamente proporzionale alla somma del tempo necessario per l'esecuzione di ciascun elenco di visualizzazione: più elenchi di visualizzazione equivalgono a una barra rossa più alta.
XFer Rappresenta il tempo necessario per caricare le informazioni bitmap nella GPU. Un segmento di grandi dimensioni indica che l'app sta impiegando molto tempo per caricare grandi quantità di grafica. Questo segmento non è visibile sui dispositivi con Android 4.0 o versioni precedenti.
Aggiorna Rappresenta il tempo impiegato per creare e aggiornare gli elenchi di visualizzazioni della vista. Se questa parte della barra è alta, potrebbero esservi molti disegni con visualizzazioni personalizzate o molto lavoro con i metodi onDraw.

Tabella 2. Barre dei componenti in Android 4.0 e 5.0.

Per saperne di più su come interpretare le informazioni fornite dallo strumento di profilazione, consulta Analisi con il rendering GPU del profilo.

Nota: anche se questo strumento è denominato Profile GPU Rendering, tutti i processi monitorati in realtà si verificano nella CPU. Il rendering avviene inviando i comandi alla GPU, che a sua volta esegue il rendering dello schermo in modo asincrono. In determinate situazioni, la GPU può avere troppo lavoro da fare e la CPU dovrà attendere prima di poter inviare nuovi comandi. In questo caso, vedrai dei picchi nelle barre arancioni e rosse e l'invio del comando si bloccherà finché non sarà liberato più spazio sulla coda dei comandi della GPU.

Visualizza l'overdraw della GPU

Un'altra funzionalità delle opzioni per sviluppatori ti consente di identificare il overdraw codificando con un colore la UI. L'overdraw si verifica quando l'app disegna lo stesso pixel più di una volta nello stesso fotogramma. Questa visualizzazione mostra quindi dove la tua app potrebbe eseguire il rendering più del necessario, il che può rappresentare un problema di prestazioni a causa dello sforzo aggiuntivo della GPU per eseguire il rendering dei pixel che non saranno visibili all'utente. Pertanto, devi correggere gli eventi overdraw quando possibile.

Se non l'hai ancora fatto, attiva le Opzioni sviluppatore. Quindi, per visualizzare l'overdraw sul dispositivo, procedi nel seguente modo:

  1. Sul dispositivo, vai a Impostazioni e tocca Opzioni sviluppatore.
  2. Scorri verso il basso fino alla sezione Rendering con accelerazione hardware e seleziona Debug overdraw GPU.
  3. Nella finestra di dialogo Debug overdraw della GPU, seleziona Mostra aree overdraw.

Android colora gli elementi della UI per identificare la quantità di overdraw come segue:

  • Colori reali: nessun overdraw
  • Blu: sovrapposta 1 volta
  • Verde:sovrascritto 2 volte
  • Rosa:sovrascritto 3 volte
  • Rosso: sovrascritto 4 o più volte

Figura 2. Un'app come appare normalmente (a sinistra) e come appare con l'overdraw GPU abilitato (a destra)

Tieni presente che questi colori sono semitrasparenti, quindi il colore esatto che vedi sullo schermo dipende dai contenuti dell'interfaccia utente.

Ora che sai riconoscere dove si trova l'overdraw nel layout, leggi come ridurre l'overdraw.

Ricorda che qualche overdraw è inevitabile. Mentre ottimizzi l'interfaccia utente della tua app, cerca di arrivare a una visualizzazione che mostri colori prevalentemente reali o solo un overdraw 1X (blu).

Figura 3. Esempi di app con molti overdraw (a sinistra) e molto meno overdraw (a destra)