Usar la vista Performance

La página de performance te puede ayudar a diagnosticar problemas de rendimiento y jank de UI en tu aplicación. Esta página ofrece información sobre tiempos y rendimiento para las actividades de tu aplicación. Consta de varias herramientas para ayudarte a identificar la causa del bajo rendimiento en tu app:

• Gráfico de frames de Flutter (solo apps de Flutter)
• Pestaña de análisis de frames (solo apps de Flutter)
• Visor de rastreo de eventos de la línea de tiempo (todas las aplicaciones nativas de Dart)
• Herramientas avanzadas de depuración (solo apps de Flutter)

La vista Performance también permite importar y exportar instantáneas (snapshots) de datos. Para obtener más información, consulta la sección Importar y exportar.

Flutter está diseñado para renderizar su UI a 60 frames por segundo (fps), o 120 fps en dispositivos capaces de realizar actualizaciones a 120Hz. Cada renderizado se denomina frame. Esto significa que, aproximadamente cada 16ms, la UI se actualiza para reflejar animaciones u otros cambios en la UI. Un frame que tarda más de 16ms en renderizarse causa jank (movimiento entrecortado) en el dispositivo de visualización.

Este gráfico contiene información sobre los frames de Flutter para tu aplicación. Cada conjunto de barras en el gráfico representa un solo frame de Flutter. Las barras están codificadas por colores para destacar las diferentes partes del trabajo que ocurren al renderizar un frame de Flutter: trabajo del hilo de UI y trabajo del hilo de rasterización.

Este gráfico contiene información sobre los tiempos de los frames de Flutter para tu aplicación. Cada par de barras en el gráfico representa un solo frame de Flutter. Seleccionar un frame de este gráfico actualiza los datos que se muestran a continuación en la pestaña Frame analysis o en la pestaña Timeline events.

El gráfico de frames de Flutter se actualiza cuando se dibujan nuevos frames en tu app. Para pausar las actualizaciones de este gráfico, haz clic en el botón de pausa a la derecha del gráfico. Este gráfico se puede contraer para ofrecer más espacio de visualización para los datos inferiores haciendo clic en el botón Flutter frames ubicado arriba del gráfico.

El par de barras que representa cada frame de Flutter está codificado por colores para destacar las distintas partes del trabajo que ocurren al renderizar un frame de Flutter: trabajo del hilo de UI y trabajo del hilo de rasterización.

El hilo de UI ejecuta código de Dart en la Dart VM. Esto incluye código de tu aplicación así como del framework de Flutter. Cuando tu app crea y muestra una escena, el hilo de UI crea un árbol de capas, un objeto ligero que contiene comandos de pintado independientes del dispositivo, y envía el árbol de capas al hilo de rasterización para que sea renderizado en el dispositivo. No bloquees este hilo.

El hilo de rasterización ejecuta código de gráficos desde el Motor de Flutter. Este hilo toma el árbol de capas y lo muestra comunicándose con la GPU (unidad de procesamiento gráfico). No puedes acceder directamente al hilo de rasterización o a sus datos, pero si este hilo es lento, es resultado de algo que has hecho en el código de Dart. Skia, la biblioteca gráfica, se ejecuta en este hilo. Impeller también utiliza este hilo.

A veces una escena da como resultado un árbol de capas que es fácil de construir pero costoso de renderizar en el hilo de rasterización. En este caso, debes averiguar qué está haciendo tu código para provocar que el código de renderizado sea lento. Tipos específicos de cargas de trabajo son más difíciles para la GPU. Pueden implicar llamadas innecesarias a saveLayer(), opacidades que se cruzan con múltiples objetos, y recortes o sombras en situaciones específicas.

Para obtener más información sobre el perfilado, consulta Identifying problems in the GPU graph.

El gráfico de renderizado de frames muestra el jank con una superposición roja. Se considera que un frame sufre de jank si tarda más de ~16 ms en completarse (para dispositivos de 60 FPS). Para lograr una tasa de renderizado de frames de 60 FPS (frames por segundo), cada frame debe renderizarse en ~16 ms o menos. Cuando se pierde este objetivo, puedes experimentar jank en la UI o frames perdidos (dropped frames).

Para obtener más información sobre cómo analizar el rendimiento de tu app, consulta Flutter performance profiling.

La compilación de shaders ocurre cuando un shader se utiliza por primera vez en tu app de Flutter. Los frames que realizan compilación de shaders se marcan en rojo oscuro:

Para obtener más información sobre cómo reducir el jank por compilación de shaders, consulta Reduce shader compilation jank on mobile.

Al seleccionar un frame con jank (lento, coloreado en rojo) del gráfico de frames de Flutter anterior, se muestran sugerencias de depuración en la pestaña Frame analysis. Estas sugerencias te ayudan a diagnosticar el jank en tu app y te notifican sobre cualquier operación costosa que hayamos detectado y que pueda haber contribuido al tiempo lento del frame.

El gráfico de eventos de la línea de tiempo muestra todo el rastreo de eventos de tu aplicación. El framework de Flutter emite eventos de línea de tiempo mientras trabaja para construir frames, dibujar escenas y rastrear otras actividades como los tiempos de las solicitudes HTTP y la recolección de basura. Estos eventos aparecen aquí en la Timeline. También puedes enviar tus propios eventos de la línea de tiempo mediante las API de dart:developer Timeline y TimelineTask.

Para obtener ayuda sobre cómo navegar y usar el visor de rastreo, haz clic en el botón ? en la parte superior derecha de la barra de pestañas de eventos de la línea de tiempo. Para actualizar la línea de tiempo con nuevos eventos de tu aplicación, haz clic en el botón de actualización (también en la esquina superior derecha de los controles de la pestaña).

Para ver un rastreo más detallado en el gráfico de eventos de la línea de tiempo, usa las opciones del menú desplegable Enhance tracing:

Para ver los nuevos eventos de la línea de tiempo, reproduce en tu app la actividad que te interesa rastrear y luego selecciona un frame para inspeccionar la línea de tiempo.

Para ver los eventos del método build() en la línea de tiempo, activa la opción Track Widget Builds. El nombre del widget se muestra en el evento de la línea de tiempo.

Mira este video para ver un ejemplo de cómo rastrear builds de widgets

Para ver los eventos de layout de los RenderObject en la línea de tiempo, activa la opción Track Layouts:

Mira este video para ver un ejemplo de cómo rastrear layouts

Para ver los eventos de paint de los RenderObject en la línea de tiempo, activa la opción Track Paints:

Mira este video para ver un ejemplo de cómo rastrear paints

Para diagnosticar problemas de rendimiento relacionados con capas de renderizado, desactiva una capa de renderizado. Estas opciones están activadas de forma predeterminada.

Para ver los efectos en el rendimiento de tu app, reproduce la actividad en tu app. Luego selecciona los nuevos frames en el gráfico de frames para inspeccionar los eventos de la línea de tiempo con las capas desactivadas. Si el tiempo de rasterización ha disminuido significativamente, el uso excesivo de los efectos que desactivaste podría estar contribuyendo al jank que viste en tu app.

Render Clip layers

Desactiva esta opción para comprobar si el uso excesivo de recortes (clipping) está afectando el rendimiento. Si el rendimiento mejora con esta opción desactivada, intenta reducir el uso de efectos de recorte en tu app.

Render Opacity layers

Desactiva esta opción para comprobar si el uso excesivo de efectos de opacidad está afectando el rendimiento. Si el rendimiento mejora con esta opción desactivada, intenta reducir el uso de efectos de opacidad en tu app.

Render Physical Shape layers

Desactiva esta opción para comprobar si el uso excesivo de efectos de modelado físico está afectando el rendimiento, como sombras o elevación. Si el rendimiento mejora con esta opción desactivada, intenta reducir el uso de efectos de modelado físico en tu app.

DevTools permite importar y exportar instantáneas (snapshots) de rendimiento. Hacer clic en el botón de exportar (esquina superior derecha, arriba del gráfico de renderizado de frames) descarga una instantánea de los datos actuales de la página de rendimiento. Para importar una instantánea de rendimiento, puedes arrastrar y soltar la instantánea en DevTools desde cualquier página. Ten en cuenta que DevTools solo admite la importación de archivos que se exportaron originalmente desde DevTools.

Para aprender a monitorear el rendimiento de una app y detectar jank usando DevTools, consulta el tutorial guiado de la Performance View.