馃殌 驴C贸mo usar la l铆nea de tiempo de DevTools con Flutter?

8 minuto(s) de lectura

驴Qu茅 es la l铆nea de tiempo de DevTools?

La vista de l铆nea de tiempo es una muestra de informaci贸n sobre los cuadros Flutter. Consta de tres partes, cada una de las cuales aumenta su granularidad.

  • Cuadro de representaci贸n de cuadros
  • Cuadro de eventos de marco
  • Perfilador de CPU

Nota: Use una compilaci贸n de perfil de su aplicaci贸n para analizar el rendimiento. Los tiempos de representaci贸n de cuadros no son indicativos del rendimiento de la versi贸n a menos que su aplicaci贸n se ejecute en modo de perfil.

La vista de l铆nea de tiempo tambi茅n admite la importaci贸n y exportaci贸n de archivos de datos de l铆nea de tiempo. Para obtener m谩s informaci贸n, consulte la secci贸n Importar y exportar .

Cuadro de representaci贸n de cuadros

Este gr谩fico se completa con fotogramas individuales a medida que se representan en su aplicaci贸n. Cada barra en el gr谩fico representa un marco. Las barras est谩n codificadas por colores para resaltar las diferentes partes del trabajo que se producen al renderizar un marco Flutter: trabajar desde el hilo de la interfaz de usuario y trabajar desde el hilo de la GPU.

Captura de pantalla de una grabaci贸n de l铆nea de tiempo

Al hacer clic en una barra, se muestran detalles adicionales sobre ese marco.

Interfaz de Usuario

El subproceso de la interfaz de usuario ejecuta el c贸digo Dart en la m谩quina virtual Dart. Esto incluye el c贸digo de su aplicaci贸n, as铆 como el marco Flutter. Cuando su aplicaci贸n crea y muestra una escena, el subproceso de la interfaz de usuario crea un 谩rbol de capas, un objeto liviano que contiene comandos de pintura independientes del dispositivo y env铆a el 谩rbol de capas al subproceso de la GPU para que se represente en el dispositivo. No no bloquear este hilo.

GPU

El subproceso de la GPU ejecuta el c贸digo de gr谩ficos del motor Flutter. Este hilo toma el 谩rbol de capas y lo muestra hablando con la GPU (unidad de procesamiento gr谩fico). No puede acceder directamente al hilo de la GPU o sus datos, pero si este hilo es lento, es el resultado de algo que ha hecho en el c贸digo Dart. Skia, la biblioteca de gr谩ficos, se ejecuta en este hilo, que a veces se denomina hilo rasterizador.

A veces, una escena da como resultado un 谩rbol de capas que es f谩cil de construir, pero costoso renderizar en el hilo de la GPU. En este caso, necesitar谩 averiguar qu茅 est谩 haciendo su c贸digo que hace que el c贸digo de procesamiento sea lento. Los 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 clips o sombras en situaciones espec铆ficas.

Para obtener m谩s informaci贸n sobre la creaci贸n de perfiles, consulte Identificaci贸n de problemas en el gr谩fico de GPU.

Jank

El cuadro de representaci贸n de cuadros muestra jank con una superposici贸n roja. Una trama se considera irregular si se tarda m谩s de ~ 16 ms en completarse. Para lograr una velocidad de representaci贸n de cuadros de 60 FPS (cuadros por segundo), cada cuadro debe renderizarse en ~ 16 ms o menos. Cuando se pierde este objetivo, es posible que experimente un salto de interfaz de usuario o fotogramas ca铆dos.

Para obtener m谩s informaci贸n sobre c贸mo analizar el rendimiento de su aplicaci贸n, consulte Perfiles de rendimiento de Flutter.

Cuadro de eventos de marco

El gr谩fico de eventos de cuadro muestra el seguimiento de eventos para un solo cuadro. El evento m谩s destacado genera el evento debajo de 茅l, y as铆 sucesivamente. Los eventos de UI y GPU son flujos de eventos separados, pero comparten una l铆nea de tiempo com煤n (que se muestra en la parte superior del cuadro de cuadros). Esta l铆nea de tiempo es estrictamente para el marco dado. No refleja el reloj compartido por todos los cuadros.

Captura de pantalla de eventos de l铆nea de tiempo para un marco

La tabla de llamas admite el zoom y la panor谩mica. Despl谩cese hacia arriba y hacia abajo para acercar y alejar, respectivamente. Para desplazarse, puede hacer clic y arrastrar el gr谩fico o desplazarse horizontalmente. Puede hacer clic en un evento para ver informaci贸n de perfiles de CPU en el generador de perfiles de CPU, que se describe en la siguiente secci贸n.

Perfilador de CPU

Esta secci贸n muestra informaci贸n de perfiles de CPU para un evento espec铆fico del cuadro de eventos de marco (Build, Layout, Paint, etc.).

Perfil de granularidad

La velocidad predeterminada a la que la VM recolecta muestras de CPU es 1 muestra / 250 渭s. Esto se selecciona de forma predeterminada en la vista de l铆nea de tiempo como 鈥淕ranularidad de perfil: medio鈥. Esta tasa se puede modificar a trav茅s del selector en la parte superior de la p谩gina. Las tasas de muestreo para granularidad baja, media y alta son 1/50 渭s, 1/250 渭s y 1/1000 渭s, respectivamente. Es importante conocer las desventajas de modificar esta configuraci贸n.

Un perfil de granularidad m谩s alto tiene una tasa de muestreo m谩s alta y, por lo tanto, produce un perfil de CPU de grano fino con m谩s muestras. Esto tambi茅n puede afectar el rendimiento de su aplicaci贸n, ya que la VM se interrumpe con m谩s frecuencia para recopilar muestras. Esto tambi茅n hace que el b煤fer de muestra de CPU de la VM se desborde m谩s r谩pidamente. La m谩quina virtual tiene un espacio limitado donde puede almacenar informaci贸n de muestra de la CPU. A una frecuencia de muestreo m谩s alta, el espacio se llena y comienza a desbordarse antes de lo que lo har铆a si se utilizara una frecuencia de muestreo m谩s baja. Esto significa que es posible que no tenga acceso a muestras de CPU para cuadros al comienzo de la l铆nea de tiempo.

Un perfil de granularidad m谩s bajo tiene una tasa de muestreo m谩s baja y, por lo tanto, produce un perfil de CPU de grano grueso con menos muestras. Sin embargo, esto afecta menos el rendimiento de su aplicaci贸n. El b煤fer de muestra de la m谩quina virtual tambi茅n se llena m谩s lentamente, por lo que puede ver muestras de CPU durante un per铆odo de tiempo de ejecuci贸n de la aplicaci贸n m谩s largo. Esto significa que tiene una mejor oportunidad de ver muestras de CPU de fotogramas anteriores en la l铆nea de tiempo.

Tabla de llamas

Esta pesta帽a del generador de perfiles muestra muestras de CPU para el evento de cuadro seleccionado (como Dise帽o en el siguiente ejemplo). Este gr谩fico debe verse como un seguimiento de la pila de arriba hacia abajo, donde el marco de la pila superior llama al que est谩 debajo de 茅l. El ancho de cada marco de pila representa la cantidad de tiempo que consumi贸 la CPU. Los marcos de pila que consumen mucho tiempo de CPU pueden ser un buen lugar para buscar posibles mejoras de rendimiento.

Captura de pantalla de un gr谩fico de llamas

脕rbol de llamadas

La vista de 谩rbol de llamadas muestra el rastreo del m茅todo para el perfil de CPU. Esta tabla es una representaci贸n de arriba hacia abajo del perfil, lo que significa que se puede expandir un m茅todo para mostrar sus calles .

  • Tiempo Total

    Tiempo que el m茅todo dedic贸 a ejecutar su propio c贸digo, as铆 como el c贸digo de sus calles.

  • Tiempo propio

    Tiempo que el m茅todo pas贸 ejecutando solo su propio c贸digo.

  • M茅todo

    Nombre del m茅todo llamado.

  • Fuente

    Ruta del archivo para el sitio de llamada al m茅todo.

Captura de pantalla de una tabla de 谩rbol de llamadas

De abajo hacia arriba

La vista ascendente muestra el seguimiento del m茅todo para el perfil de la CPU pero, como su nombre indica, es una representaci贸n ascendente del perfil. Esto significa que cada m茅todo de nivel superior en la tabla es en realidad el 煤ltimo m茅todo en la pila de llamadas para una muestra de CPU dada (en otras palabras, es el nodo hoja para la muestra).

En esta tabla, se puede expandir un m茅todo para mostrar a quienes llaman .

  • Tiempo Total

    Tiempo que el m茅todo dedic贸 a ejecutar su propio c贸digo, as铆 como el c贸digo de su destinatario.

  • Tiempo propio

    Para los m茅todos de nivel superior en el 谩rbol de abajo hacia arriba (marcos de pila de hojas en el perfil), este es el tiempo que el m茅todo pas贸 ejecutando solo su propio c贸digo. Para los nodos secundarios (las personas que llaman en el perfil de la CPU), este es el tiempo propio de la persona que llama cuando la llama la persona que llama. En el siguiente ejemplo, el tiempo propio de la persona Element.updateSlotForChild.visit()que llama es igual al tiempo propio de la persona [Stub] OneArgCheckInLineCacheque llama cuando es llamado por la persona que llama.

  • M茅todo

    Nombre del m茅todo llamado.

  • Fuente

    Ruta del archivo para el sitio de llamada al m茅todo.Captura de pantalla de una tabla de abajo hacia arribaImportar y exportarDevTools admite la importaci贸n y exportaci贸n de instant谩neas de l铆nea de tiempo. Al hacer clic en el bot贸n de exportaci贸n (esquina superior derecha encima del cuadro de representaci贸n de cuadros) se descarga una instant谩nea del estado actual de la l铆nea de tiempo. Para importar una instant谩nea de la l铆nea de tiempo, puede arrastrar y soltar la instant谩nea en DevTools desde cualquier p谩gina. Tenga en cuenta que DevTools solo admite la importaci贸n de archivos que se exportaron originalmente desde DevTools.

Importar y exportar

DevTools admite la importaci贸n y exportaci贸n de instant谩neas de l铆nea de tiempo. Al hacer clic en el bot贸n de exportaci贸n (esquina superior derecha encima del cuadro de representaci贸n de cuadros) se descarga una instant谩nea del estado actual de la l铆nea de tiempo. Para importar una instant谩nea de la l铆nea de tiempo, puede arrastrar y soltar la instant谩nea en DevTools desde cualquier p谩gina. Tenga en cuenta que DevTools solo admite la importaci贸n de archivos que se exportaron originalmente desde DevTools.

Gu铆a DevTools

馃憠 驴Qu茅 es DevTools? 馃憠 驴C贸mo instalar DevTools? 馃憠 驴C贸mo usar el inspector de DevTools? 馃搶 驴C贸mo usar la l铆nea de tiempo de DevTools? 馃憠 驴C贸mo usar la vista de memoria de DevTools? 馃憠 驴C贸mo usar la vista de rendimiento de DevTools? 馃憠 驴C贸mo usar el depurador de DevTools? 馃憠 驴C贸mo usar la vista de registro de DevTools? 馃憠 Gu铆a Flutter?

Relacionados

馃帗 Cursos en Espa帽ol 馃憠 Ejemplos de Aplicaciones 鈿 Documentaci贸n en Espa帽ol

Fuente: Salvo que se indique lo contrario, este trabajo est谩 licenciado bajo una licencia internacional Creative Commons Attribution 4.0 y los ejemplos de c贸digo est谩n licenciados bajo la licencia BSD. Creado por Flutter Oficial