Cómo perfilar el código fuente nativo React usando Xcode / Instruments / Time Profiler

19

Estamos utilizando React Native 0.59.10y React-Redux 5.0.7, y estamos experimentando un problema de rendimiento vinculado a la CPU, en el que nuestras acciones de Redux están tardando ~ 0.25 segundos en completarse.

Hemos perfilado usando la configuración de Time Profiler en Instrumentos, pero ninguno de nuestro código JS está simbolizado.

La depuración remota en Chrome parece simplemente depurar la página del "inspector remoto", lo cual es completamente inútil.

¿Hay alguna manera de construir / adjuntar un mapa fuente, o simbolizar las direcciones de memoria que se ven a continuación, a los nombres / llamadas de la función JS?

Instrumentos Callstack

Craig Otis
fuente
Si está utilizando expo, puede ejecutar la aplicación directamente en Chrome y depurarla allí.
Mykybo
No, estamos usando una buena cantidad de componentes nativos, y como resultado, Expo no es una opción.
Craig Otis

Respuestas:

1

Firefox Profiler

Comprensión de Firefox Profiler

Firefox Profiler tiene documentación más actualizada disponible en profiler.firefox.com/docs/. Sin embargo, lo siguiente podría tener información potencialmente útil para problemas específicos de Gecko.

Puede consultar algunas preguntas frecuentes sobre Firefox Profilers.

Informar un problema de rendimiento tiene una guía paso a paso para obtener un perfil cuando lo solicitan los desarrolladores de Firefox.

1. Cronología

La línea de tiempo tiene varias filas de marcadores de seguimiento (segmentos de colores) que indican eventos interesantes. Desplácese sobre ellos para ver más información. Debajo de los marcadores de seguimiento hay filas correspondientes a la actividad en una variedad de hilos.

Sugerencia: Los subprocesos que están anotados con "[predeterminado]" están en el proceso principal (también conocido como "UI", también conocido como "navegador Chrome", también conocido como "principal") y los anotados con "[tab]" están en el contenido web (también conocido como procesos "secundarios").

ingrese la descripción de la imagen aquí

Consejo: Las tareas de ejecución prolongada en el proceso principal bloquearán todas las entradas o dibujos con la interfaz de usuario del navegador (también conocido como "UI jank"), mientras que las tareas de ejecución prolongada en el proceso de contenido bloquearán la interactividad con la página, pero aún permitirán al usuario desplazarse y zoom alrededor gracias a APZ.

Marcadores de rastreo

Red: Indican que el bucle de eventos no responde. Tenga en cuenta que los eventos de alta prioridad como vsync no se incluyen aquí. También tenga en cuenta que esto indica lo que habría sucedido si hubiera habido un evento en espera y no necesariamente que hubiera un evento pendiente durante tanto tiempo.

Black: Estos indican llamadas síncronas IPC.

2. Call Tree

ingrese la descripción de la imagen aquí

El árbol de llamadas muestra las muestras organizadas por 'Tiempo de ejecución' que mostrará los datos por hora del reloj de pared. Hay nombres grises más claros a la derecha de los elementos del árbol que indican de dónde proviene el código. Tenga en cuenta que los elementos pueden ser de JavaScript, Gecko o bibliotecas del sistema. Tenga en cuenta que si algunas funciones aún no se nombran correctamente, es posible que la simbolización aún no se haya completado.

Consejo: Puede hacer clic con el botón derecho en el nombre de una función para obtener una opción para copiar su nombre en el portapapeles.

3. Compartir el perfil Haga clic en "Compartir ..."> Compartir reconociendo que las URL que había abierto y sus extensiones de Firefox se incluirán en los datos del perfil enviados al servidor. Si selecciona un rango de tiempo diferente, la URL revelada presionando "Enlace permanente" cambiará para que pueda estar seguro de que el destinatario de la URL verá las mismas cosas que está viendo.

Vignesh Kumar A
fuente
¿El perfilador de Firefox se comporta de manera diferente a los perfiladores de Safari o Chrome? En mi experiencia, perfilan la pestaña / página de depuración remota en sí, no la aplicación React Native en ejecución.
Craig Otis