Video Summary and Transcription
La charla de hoy presenta Flashlight, una herramienta para medir el rendimiento de las aplicaciones móviles. Flashlight proporciona un informe de rendimiento que destaca problemas como el alto uso de CPU en dispositivos de gama baja. Para solucionar estos problemas, se puede utilizar el componente Flashlist de Shopify. Flashlight también se puede utilizar localmente para medir los cambios de rendimiento en las aplicaciones React Native, con la capacidad de ver la puntuación cambiando rápidamente y el rendimiento mejorado después de implementar las correcciones. Se puede encontrar más información en la documentación y en un artículo que compara el rendimiento de desplazamiento en React Native.
1. Introducción a Flashlight
Hola a todos. Hoy, estoy feliz de hablar sobre la medición del rendimiento de las aplicaciones móviles e introducir nuestra nueva herramienta llamada Flashlight. Es como un Lighthouse móvil. Solo sube tu aplicación Android en app.flashlight.dev, configura la medición y obtén un informe de rendimiento.
Hola a todos. Soy Alex. He estado trabajando con React Native durante los últimos ocho años en BAM, y hoy estoy muy feliz de hablarles sobre la medición del rendimiento de las aplicaciones móviles. Siempre he querido tener una forma fácil de saber si el rendimiento de mi aplicación era bueno o no. Y siempre he estado celoso de los desarrolladores web por Lighthouse. ¿Alguna vez has usado Lighthouse? Puedes ir a cualquier sitio web y con él, con unos pocos clics, simplemente generar un informe de rendimiento y obtener una puntuación de rendimiento para la página web que visitaste, lo cual es bastante genial, ¿verdad? ¿No sería agradable si tuviéramos algo similar, pero para aplicaciones móviles? Bueno, hoy estoy muy orgulloso de presentarles nuestra nueva herramienta llamada Flashlight. Está pensada como un Lighthouse móvil. Así que veamos cómo funciona. Puedes ir ahora mismo, si quieres, a app.flashlight.dev y subir cualquier aplicación Android, el soporte para iOS está en camino. Así que digamos, por ejemplo, esto es compartir mi teléfono. Tenemos una aplicación como esta, como tengo una especie de clon de Netflix. Puedo generar un APK de lanzamiento para él y subirlo aquí mismo. Y luego puedo configurar lo que quiero que Flashlight mida. Así que por defecto, puedes medir el inicio de la aplicación bastante fácilmente. Solo necesitas introducir aquí algún texto que aparecerá cuando la aplicación se haya cargado. Por ejemplo, aquí cuando mi aplicación se ha cargado, sé que familia e historia aparecerán así que puedo simplemente introducir familia aquí, y luego hacer clic en envíame mi rendimiento
2. Análisis del Informe de Rendimiento y Solución de Problemas
Ahora se abre una nueva página y, después de aproximadamente 10 minutos, Flashlight proporciona un informe de rendimiento. Podemos ver que la aplicación tiene un alto uso de CPU, particularmente en el Hilo JS. Flashlight destaca este problema, especialmente en dispositivos de gama baja. Para solucionarlo, podemos cambiar a usar el componente de Shopify llamado Flashlist, que mejora significativamente el rendimiento.
informe. Ahora se abre una nueva página, dependiendo del tráfico, debería tomar aproximadamente 10 minutos para terminar y que Flashlight obtenga el informe. Así que voy a dividir esto un poco. Entonces, cuando Flashlight finalmente termina, después de aproximadamente 10 minutos, esto es lo que verías. Verías que esencialmente lo que sucedió es que Flashlight ha iniciado la aplicación 10 veces y ha medido performance y lo que es realmente agradable es que tienes este botón de ver informe y si haces clic en él, boom, tienes tu informe de performance. Y en nuestro caso, podemos ver que es bastante malo. Afortunadamente, Flashlight nos da algunas métricas de performance para entender por qué es tan malo. Aquí podemos ver, por ejemplo, que este aquí es el que parece ser problemático. Alto uso de CPU. Vemos que tenemos un hilo usando mucha CPU durante mucho tiempo, un hilo llamado mqtjs. Podemos revisar los gráficos. Así que tenemos tasas de fotogramas, tenemos el uso total de CPU y tenemos el uso de CPU por hilo y podemos ver de nuevo mqtjs de hecho, básicamente durante toda la duración de la medida es realmente muy alto. Utiliza demasiada CPU. Bueno, podemos preguntarnos, ¿qué es mqtjs? Lo adivinaste, es el Hilo JS. Nunca quieres que este tipo esté cerca del 100% de uso de CPU porque entonces eso es lo mismo que tener cero JSFPS, tu aplicación no respondería a nada. El Hilo JS está bloqueado. Entonces, eso es lo que sucede cuando abrimos nuestra aplicación, básicamente, y Flashlight nos está diciendo que tenemos un gran problema. Ten en cuenta que en realidad Flashlight se está ejecutando en un verdadero dispositivo Android de gama baja, un Samsung Galaxy A10s por defecto. Así que en un dispositivo de gama baja sí, performance es realmente mala. ¿Qué podemos hacer para solucionarlo? Bueno, nuestra aplicación es básicamente una lista vertical compuesta de listas horizontales anidadas. Y estamos usando flat lists para ambas, horizontal y vertical. Pero veamos qué sucede si cambiamos a usar el componente de Shopify llamado Flashlist. Luego podemos simplemente regenerar nuestro APK y hacer exactamente lo mismo que antes para obtener un nuevo informe con Flashlist. ¡Y boom! Ah, esto es mucho mejor. Obtenemos una puntuación de 75 de 100. Pero lo que es realmente agradable es que podemos ir a la sección de historial aquí. Podemos hacer clic en ambos informes, el primero, MyAppWithFlatlist y el segundo llamado Flashlist. Y podemos abrir la vista de comparación. Tenemos el video también. Solo voy a cerrarlos. Y por ejemplo, si salto al uso de CPU por hilo, podemos ver bastante fácilmente que sí, en verde con Flashlist, el uso de CPU del hilo Jez es
3. Uso de Flashlight para la Medición Local del Rendimiento
Con Flashlight, puedes medir los cambios de rendimiento en tu aplicación utilizando nuestra interfaz de línea de comandos (CLI) de código abierto. Instálalo fácilmente y ejecuta 'Flashlight measure' en tu dispositivo conectado con una aplicación React Native. Comienza a medir el rendimiento del desplazamiento y observa cómo la puntuación cambia rápidamente. Si hay un problema en el hilo JS, implementa una solución como cambiar a Flashlist. Recarga y mide de nuevo para ver un rendimiento mejorado. Para obtener más información, consulta la documentación en docs.flashlight.dev o un artículo que compara el rendimiento del desplazamiento de la lista en React Native entre FlatList y FlashList. No dudes en ponerte en contacto a través de Twitter o GitHub si tienes alguna pregunta.
de hecho, mucho mejor con Flashlist. Pero lo bueno de Flashlight es que también puedes usarlo localmente para medir rápidamente los cambios de rendimiento en tu aplicación con nuestra CLI de código abierto. Es muy sencillo de instalar. Y luego, por ejemplo, si tienes un dispositivo conectado con una aplicación React Native en ejecución, puedes simplemente ejecutar Flashlight measure. Luego auto detect para detectar automáticamente la aplicación que está actualmente en foco. Y digamos que quiero medir el rendimiento del desplazamiento. Puedo empezar a medir. Comienzo a desplazarme en mi aplicación. Y medirá el rendimiento de este desplazamiento. Puedes ver que la puntuación cambia rápidamente a cero. De nuevo, tenemos un problema masivo en el hilo JS al desplazarse. Así que digamos que implementaste una solución. Por ejemplo, cambiando de flat list a flash list. Podemos recargar. Y básicamente podemos hacer lo mismo de nuevo. Empecemos a medir de nuevo. Desplázate de nuevo. Y podemos ver que ahora, el rendimiento es realmente mucho mejor. Eso es todo para esta breve presentación de Flashlight. Si quieres saber más sobre lo que puede hacer, puedes consultar la documentación en docs.flashlight.dev o también puedes consultar este artículo sobre la comparación del rendimiento del desplazamiento de la lista en una aplicación React Native entre FlatList y FlashList, que entra en más detalles. De lo contrario, si tienes alguna pregunta también puedes contactarme en Twitter o GitHub. En cualquier caso, espero que hayas disfrutado de la presentación y que tengas un buen tiempo.
Comments