Come profilare il codice sorgente nativo di React usando Xcode / Instruments / Time Profiler


19

Stiamo utilizzando React Native 0.59.10e React-Redux 5.0.7e stiamo riscontrando un problema di prestazioni legato alla CPU, in cui le nostre azioni Redux richiedono ~ 0,25 secondi per essere completate.

Abbiamo profilato usando la configurazione di Time Profiler in Instruments, ma nessuno del nostro codice JS è simbolizzato.

Il debug remoto in Chrome sembra semplicemente eseguire il debug della pagina "ispettore remoto", che è del tutto inutile.

Esiste un modo per creare / collegare una mappa di origine o simboleggiare gli indirizzi di memoria visualizzati di seguito ai nomi / chiamate della funzione JS?

Callstack di strumenti


Se stai usando expo, puoi eseguire l'app direttamente in Chrome ed eseguirne il debug.
Mykybo,

No, stiamo usando un buon numero di componenti nativi e di conseguenza Expo non è un'opzione.
Craig Otis,

Risposte:


1

Firefox Profiler

Comprensione di Firefox Profiler

Firefox Profiler ha una documentazione più aggiornata disponibile su profiler.firefox.com/docs/. Tuttavia, i seguenti potrebbero contenere alcune informazioni potenzialmente utili per problemi specifici di Gecko.

Puoi dare un'occhiata ad alcune domande frequenti sui profili di Firefox.

Segnalazione di un problema di prestazioni ha una guida passo-passo per ottenere un profilo quando richiesto dagli sviluppatori di Firefox.

1. Cronologia

La sequenza temporale ha diverse file di marcatori di tracciamento (segmenti colorati) che indicano eventi interessanti. Passa con il mouse su di essi per visualizzare ulteriori informazioni. Sotto i marker di tracciamento sono presenti righe corrispondenti all'attività su una varietà di thread.

Suggerimento: i thread che sono annotati con "[default]" sono nel processo genitore (aka "UI", aka "browser chrome", aka "main") e quelli annotati con "[tab]" sono nel contenuto Web (aka processi "figlio").

inserisci qui la descrizione dell'immagine

Suggerimento: le attività a esecuzione prolungata nel processo principale bloccheranno tutti gli input o i disegni con l'interfaccia utente del browser (nota anche come "UI jank") mentre le attività a esecuzione prolungata nel processo di contenuto bloccheranno l'interattività con la pagina, consentendo comunque all'utente di eseguire la panoramica e ingrandisci grazie a APZ.

Marcatori di tracciamento

Red: Indicano che il loop degli eventi non risponde. Si noti che eventi ad alta priorità come vsync non sono inclusi qui. Si noti inoltre che ciò indica cosa sarebbe accaduto se ci fosse stato un evento in attesa e non necessariamente che ci fosse un evento in sospeso da così tanto tempo.

Black: Indicano le chiamate IPC sincrone.

2. Chiama l'albero

inserisci qui la descrizione dell'immagine

La struttura ad albero delle chiamate mostra i campioni organizzati in base al "Tempo di esecuzione", che mostra i dati in base al tempo di clock. Ci sono nomi grigi più chiari a destra degli elementi dell'albero che indicano da dove proviene il codice. Tenere presente che gli elementi possono provenire da librerie JavaScript, Gecko o di sistema. Notare che se alcune funzioni non sono ancora nominate correttamente, la simbolizzazione potrebbe non essere ancora terminata.

Suggerimento: è possibile fare clic con il pulsante destro del mouse sul nome di una funzione per ottenere un'opzione per copiarne il nome negli Appunti.

3. Condivisione del profilo Fare clic su "Condividi ..."> Condividi riconoscendo che gli URL aperti e le estensioni di Firefox verranno inclusi nei dati del profilo inviati al server. Se selezioni un intervallo di tempo diverso, l'URL rivelato premendo "Permalink" cambierà in modo da poter essere sicuro che il destinatario dell'URL vedrà le stesse cose che stai vedendo.


Il profiler di Firefox si comporta diversamente dai profili di Safari o Chrome? Nella mia esperienza, profilano la scheda / pagina di debug remoto stessa, non l'applicazione React Native in esecuzione.
Craig Otis,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.