¿Quieres saber si tu aplicación RN tiene el mejor rendimiento? Echa un vistazo a la estadística de renderizado lento de la UI en la tienda de aplicaciones, si tus números no son tan buenos, ¡ven a esta charla! Presentaré Systrace, una herramienta que puede parecer intimidante al principio, pero es una herramienta fantástica una vez que aprendes a dominarla. Mostraré cómo nos ayudó a detectar y solucionar problemas de rendimiento en nuestra aplicación.
Depuración del rendimiento de RN en Android
Video Summary and Transcription
La charla de hoy se centra en el rendimiento de las aplicaciones React Native. El ponente habla sobre la importancia de la velocidad de fotogramas como métrica e introduce el monitor de rendimiento proporcionado por React Native. Explica cómo Systrace, una herramienta de traza del sistema, se puede utilizar para identificar problemas de rendimiento. El primer problema de rendimiento analizado involucra al hilo de la interfaz de usuario realizando cálculos excesivos, lo que lleva a gastar una cantidad significativa de tiempo en la función de dibujo. Se identifica que la vista de animación Lottie necesita optimización. La charla también menciona un segundo problema de rendimiento que se explorará.
1. React Native Performance and Systrace
Hola a todos. Hoy quiero hablar sobre el rendimiento de las aplicaciones de React Native. La tasa de fotogramas es una métrica clave para analizar el rendimiento de la aplicación. React Native proporciona un monitor de rendimiento que muestra las tasas de fotogramas del hilo de UI y del hilo de JS. Para identificar problemas de rendimiento, utilizamos Systrace, una herramienta de traza del sistema disponible en el SDK de Android. Systrace genera un archivo de traza que se puede abrir en Chrome, mostrando las tasas de fotogramas y las fuentes de los problemas de rendimiento.
Hola a todos. Soy Alex. Estoy emocionado de hablarles en la Cumbre de React. Soy líder en BAM y somos una empresa con sede en París. Desarrollamos aplicaciones móviles en Kotlin, Swift, Flutter y, por supuesto, React Native. Hoy quiero hablarles sobre el rendimiento de las aplicaciones de React Native. Ahora, una de las métricas clave para analizar el rendimiento de su aplicación es la tasa de fotogramas. Desea que su aplicación se ejecute a 60 fotogramas por segundo. Una de las cosas buenas que vienen con React Native de serie es esta herramienta. El monitor de rendimiento. Puede obtener las tasas de fotogramas del hilo de UI y también del hilo de JS. Ahora, uno de los problemas a los que nos enfrentamos en nuestra aplicación es que la tasa del hilo de UI era consistentemente baja después de iniciar la aplicación, incluso cuando el usuario no estaba haciendo absolutamente nada. La pregunta era cómo descubrir qué está sucediendo realmente bajo el capó. Y la solución para eso fue Systrace. Systrace es la abreviatura de System Trace. Está disponible de serie en el SDK de Android en la carpeta Platform Tools. Básicamente, es un script para que pueda conectar su aplicación a la computadora y simplemente iniciar el script, hacer algunas cosas en su aplicación, detener el script y se imprimirá un archivo HTML enorme, un archivo de traza. Puede abrir ese archivo en Chrome y cuando lo abra, se verá así. Wow. Es intimidante, ¿verdad? Muy colorido, pero bastante intimidante. Lo primero que desea hacer es en el lado izquierdo, encontrar su aplicación. En mi caso, mi ID de paquete era myapp.debug, así es donde lo encontré. Y luego, debajo de él, dado que estamos hablando de tasas de fotogramas, lo que es realmente interesante es la línea de fotogramas. Si haces zoom un poco, en la línea de fotogramas, notarás muchas F. Hay F rojas, F amarillas y F verdes. Puedes suponer que una F roja es mala y una F verde es buena. De hecho, una F verde es en realidad un fotograma que se pudo calcular en menos de 16 milisegundos para que la aplicación pueda ejecutarse a 60 fotogramas por segundo. Las F amarillas y las F rojas no tanto. Entonces, si estás tratando de analizar problemas de rendimiento, debes echar un vistazo a las fuentes.
2. Analyzing Performance Issues: Part 1
Vamos a analizar el primer problema de rendimiento. Al hacer zoom en un solo fotograma, podemos ver que el hilo de UI realiza numerosos cálculos, superando el tiempo asignado. Al examinar los detalles, descubrimos que la función de dibujo, encargada de redibujar elementos, estaba llevando mucho tiempo. Una investigación más detallada nos llevó a la vista de animación Lottie, que requería optimización. Ahora, exploremos el segundo problema de rendimiento.