Join us on the livestream at Android Dev Summit on 7-8 November 2018, starting at 10AM PDT!

Inspeccionar la velocidad de representación y la superposición de la GPU

Android incluye algunas opciones para programadores en el dispositivo que te ayudan a visualizar los casos en que tu app podría experimentar dificultades para representar su IU; por ejemplo, un mayor trabajo de representación que el necesario o la ejecución de operaciones extensas de subprocesos y GPU. En esta página se describe la manera de depurar la superposición de la GPU y generar perfiles para la representación de la GPU.

Si deseas más información sobre las opciones para programadores en el dispositivo, incluida la forma de habilitarlas, consulta Configurar opciones para programadores en el dispositivo.

Generar perfiles de velocidad de representación de GPU

La herramienta Profile GPU rendering muestra, en forma de histograma de desplazamiento, una representación visual del tiempo necesario para representar los fotogramas de una ventana de IU en relación con un benchmark de 16 ms por fotograma.

En las GPU menos potentes, la frecuencia de relleno disponible (la velocidad a la cual la GPU puede rellenar el búfer de fotogramas) puede ser bastante baja. A medida que la aumenta la cantidad de píxeles requeridos para dibujar un fotograma, la GPU puede tardar más en procesar comandos nuevos y solicitar tiempo de espera al resto del sistema hasta ordenarse. La herramienta de generación de perfiles te ayuda a detectar los casos en que el rendimiento de la GPU se ve afectado cuando esta intenta dibujar píxeles o sobrecargado debido a una superposición voluminosa.

Nota: Esta herramienta de generación de perfiles no funciona con apps que usen el NDK. Esto se debe a que el sistema envía mensajes del marco de trabajo al segundo plano cuando OpenGL ocupa un contexto de pantalla completa. En esos casos, probablemente te resulte útil una herramienta de generación de perfiles que provea el fabricante de la GPU.

Habilitar el generador de perfiles

Antes de comenzar, asegúrate de usar un dispositivo con Android 4.1 (nivel de API 16) o versiones posteriores y habilitar las opciones para programadores. Para iniciar la generación de perfiles para la representación de la GPU del dispositivo mientras se usa tu app, haz lo siguiente:

  1. En tu dispositivo, dirígete a Settings y presiona Developer Options.
  2. En la sección Monitoring, selecciona Profile GPU Rendering.
  3. En el diálogo Profile GPU rendering, elige On screen as bars para superponer los gráficos en la pantalla de tu dispositivo.
  4. Abre la app para la que desees generar perfiles.

Inspecciona el resultado

En la imagen ampliada del gráfico de “Profile GPU rendering” que se muestra en la figura 1, puedes ver la sección de color, como se muestra en Android 6.0 (nivel de API 23).

Figura 1: Gráfico ampliado de “Profile GPU rendering”.

A continuación, se muestran algunos aspectos que debes tener en cuenta sobre el resultado:

  • Para cada aplicación visible, la herramienta muestra un gráfico.
  • Cada barra vertical en el eje horizontal representa un fotograma y la altura de cada una representa la cantidad de tiempo (en milisegundos) que el fotograma tardó en representarse.
  • La línea verde horizontal representa 16 milisegundos. Para alcanzar los 60 fotogramas por segundo, la barra vertical para cada fotograma debe permanecer debajo de esta línea. Cada vez que una barra sobrepasa esta línea, puede haber pausas en las animaciones.
  • La herramienta destaca los fotogramas que exceden el umbral de 16 milisegundos haciendo más ancha y menos transparente la barra correspondiente.
  • Cada barra tiene componentes de colores que corresponden a una etapa en el proceso de representación. El número de componentes varía según el nivel de API del dispositivo.

En la siguiente tabla se proporcionan descripciones de cada segmento de una barra vertical en el resultado del generador de perfiles cuando se usa un dispositivo con Android 6.0 y versiones posterior.

Componente de la barraEtapa de representaciónDescripción
Swap Buffers Representa el tiempo que la CPU espera para que la GPU termine su trabajo. Si esta barra se vuelve alta, significa que el procesamiento de la app en la GPU es demasiado intensivo.
Command Issue Representa el tiempo que el representador 2D de Android pasa enviando comandos a OpenGL para dibujar y volver a dibujar las listas de visualización. La altura de esta barra es directamente proporcional a la suma del tiempo que cada lista de visualización tarda en ejecutarse (una mayor cantidad de listas de visualización equivale a una barra roja más alta).
Sync & Upload Representa el tiempo necesario para subir información de mapa de bits a la GPU. Un segmento largo indica que la app tarda bastante en cargar una cantidad de gráficos considerable.
Draw Representa el tiempo utilizado para crear y actualizar las listas de visualización de la vista. Si esta parte de la barra es alta, es posible que se dibujen muchas vistas personalizadas o que el procesamiento en métodos onDraw sea muy intensivo.
Measure / Layout Representa la cantidad de tiempo invertido en los callbacks onLayout y onMeasure en la jerarquía de vistas. Un segmento largo indica que la jerarquía de vista está tardando mucho en procesar.
Animation Representa el tiempo que tomó evaluar todos los animadores que ejecutaban el fotograma en cuestión. Si este segmento es largo, tu app podría estar usando un animador personalizado que no tenga un buen rendimiento o podría haber trabajo no intencionado en ejecución como resultado de la actualización de propiedades.
Input Handling Representa el tiempo que la app ocupó en la ejecución de código dentro del callback de un evento de entrada. Si este segmento es largo, indica que la app tarda mucho tiempo en procesar la entrada del usuario. Considera descargar este procesamiento a un subproceso diferente.
Misc Time / VSync Delay Representa el tiempo que la app ocupa en la ejecución de operaciones entre dos fotogramas consecutivos. Podría ser un indicador de que existe demasiado procesamiento en el subproceso de la IU, que podría descargarse a un subproceso diferente.

Tabla 1: Barras de componentes en Android 6.0 y versiones posteriores.

Entre las versiones 4.0 (nivel de API 14) y 5.0 (nivel de API 21) de Android, los segmentos son azules, púrpuras, rojos y naranjas. En las versiones de Android anteriores a la 4.0, los componentes son azules, rojos y naranjas. En la tabla siguiente, se muestran las barras de componentes de Android 4.0 y 5.0.

Componente de la barraEtapa de representaciónDescripción
Process Representa el tiempo que la CPU espera para que la GPU termine su trabajo. Si esta barra se vuelve alta, significa que el procesamiento de la app en la GPU es demasiado intensivo.
Ejecución Representa el tiempo que el representador 2D de Android pasa enviando comandos a OpenGL para dibujar y volver a dibujar las listas de visualización. La altura de esta barra es directamente proporcional a la suma del tiempo que cada lista de visualización tarda en ejecutarse (una mayor cantidad de listas de visualización equivale a una barra roja más alta).
XFer Representa el tiempo necesario para subir información de mapa de bits a la GPU. Un segmento largo indica que la app tarda bastante en cargar una cantidad de gráficos considerable. Este segmento no puede verse en dispositivos con Android 4.0 o versiones anteriores.
Update Representa el tiempo utilizado para crear y actualizar las listas de visualización de la vista. Si esta parte de la barra es alta, es posible que se dibujen muchas vistas personalizadas o que el procesamiento en métodos onDraw sea muy intensivo.

Tabla 2: Barras de componentes en Android 4.0 y 5.0.

Para obtener más información sobre cómo interpretar los datos provistos por la herramienta de generación de perfiles, lee Realizar análisis con la herramienta “Profile GPU rendering”.

Nota: Aunque esta herramienta se llama “Profile GPU rendering”, en realidad todos los procesos supervisados tienen lugar en la CPU. La representación se produce con el envío de comandos a la GPU y la GPU representa la pantalla de forma asíncrona. En algunas situaciones, es posible que la GPU tenga demasiado trabajo y que tu CPU deba esperar para poder enviar comandos nuevos. Cuando esto ocurra, verás picos en las barras naranja y roja, y el envío de comandos se bloqueará hasta que haya disponible más espacio en la cola de comandos de la GPU.

Visualizar la superposición de la GPU

Otra función de las opciones para programadores te ayuda a identificar superposiciones mediante la codificación por color de tu IU. La superposición se produce cuando tu app dibuja el mismo píxel más de una vez dentro del mismo fotograma. Entonces, en esta visualización se muestran los puntos en que tu app podría realizar más trabajo de representación que el necesario, lo cual puede ser un problema de rendimiento debido al esfuerzo adicional de la GPU para representar píxeles que el usuario no podrá ver. Por lo tanto, debes corregir los eventos de superposición siempre que sea posible.

Si todavía no lo hiciste, habilita las opciones para programadores. Luego, para visualizar la superposición en tu dispositivo, haz lo siguiente:

  1. Dirígete a Settings y presiona Developer Options.
  2. Desplázate hacia abajo hasta la sección Hardware accelerated rendering y selecciona Debug GPU Overdraw.
  3. En el diálogo Debug GPU overdraw, selecciona Show overdraw areas.

Android da color a los elementos de la IU para identificar el nivel de superposición de la siguiente manera:

  • Color real: No existe superposición
  • Azul: Superpuesto 1 vez
  • Verde: Superpuesto 2 veces
  • Rosa: Superpuesto 3 veces
  • Rojo: Superpuesto 4 o más veces

Figura 2: Aspecto que una app tiene normalmente (izquierda) y con la opción “GPU Overdraw” habilitada (derecha).

Ten en cuenta que estos colores son semitransparentes, por lo cual el color exacto que ves en la pantalla depende del contenido de tu IU.

Ahora que puedes reconocer los puntos en que se produce la superposición en tu diseño, lee información sobre cómo reducir la superposición.

Recuerda que es inevitable que exista cierta superposición. A medida que ajustes la interfaz de usuario de tu app, intenta lograr una visualización que muestre mayoritariamente colores reales o solo una superposición de 1X (azul).

Figura 3: Ejemplos de una app con mucha superposición (izquierda) y mucha menos superposición (derecha).