Profilieren von React Native-Quellcode mit Xcode / Instruments / Time Profiler

19

Wir verwenden React Native 0.59.10und React-Redux 5.0.7und haben ein CPU-gebundenes Leistungsproblem, bei dem unsere Redux-Aktionen ca. 0,25 Sekunden dauern.

Wir haben ein Profil mit der Time Profiler-Konfiguration in Instruments erstellt, aber keiner unserer JS-Codes ist symbolisiert.

Das Remote-Debuggen in Chrome scheint nur die Seite "Remote Inspector" zu debuggen, was völlig wenig hilfreich ist.

Gibt es eine Möglichkeit, eine Quellzuordnung zu den JS-Funktionsnamen / -aufrufen zu erstellen / anzuhängen oder die unten gezeigten Speicheradressen zu symbolisieren?

Instrumente Callstack

Craig Otis
quelle
Wenn Sie expo verwenden, können Sie die App direkt in Chrome ausführen und dort debuggen.
Mykybo
Nein, wir verwenden eine gute Anzahl nativer Komponenten, weshalb Expo keine Option ist.
Craig Otis

Antworten:

1

Firefox Profiler

Grundlegendes zu Firefox Profiler

Der Firefox Profiler verfügt über eine aktuellere Dokumentation unter profiler.firefox.com/docs/. Das Folgende könnte jedoch einige potenziell nützliche Informationen für Gecko-spezifische Probleme enthalten.

Sie können einige häufig gestellte Fragen zu den Firefox-Profilern lesen.

Das Melden eines Leistungsproblems enthält eine schrittweise Anleitung zum Abrufen eines Profils, wenn dies von Firefox-Entwicklern angefordert wird.

1. Zeitleiste

Die Zeitleiste enthält mehrere Reihen von Verfolgungsmarkierungen (farbige Segmente), die interessante Ereignisse anzeigen. Bewegen Sie den Mauszeiger über sie, um weitere Informationen anzuzeigen. Unterhalb der Verfolgungsmarkierungen befinden sich Zeilen, die der Aktivität in einer Vielzahl von Threads entsprechen.

Tipp: Threads, die mit "[default]" kommentiert sind, befinden sich im übergeordneten Prozess (auch bekannt als "UI", auch bekannt als "browser chrome", auch bekannt als "main"), und Threads, die mit "[tab]" versehen sind, befinden sich im Webinhalt (aka "Kind") Prozesse.

Geben Sie hier die Bildbeschreibung ein

Tipp: Lang laufende Aufgaben im übergeordneten Prozess blockieren alle Eingaben oder Zeichnungen mit der Browser-Benutzeroberfläche (auch als "UI-Jank" bezeichnet), während lang laufende Aufgaben im Inhaltsprozess die Interaktivität mit der Seite blockieren, dem Benutzer jedoch das Schwenken und Weiterleiten ermöglichen Zoomen Sie dank APZ.

Verfolgungsmarkierungen

Red: Diese zeigen an, dass die Ereignisschleife nicht reagiert. Beachten Sie, dass Ereignisse mit hoher Priorität wie vsync hier nicht enthalten sind. Beachten Sie auch, dass dies anzeigt, was passiert wäre, wenn ein Ereignis gewartet hätte und nicht unbedingt, dass ein Ereignis so lange ansteht.

Black: Diese zeigen synchrone IPC-Aufrufe an.

2. Rufen Sie Tree auf

Geben Sie hier die Bildbeschreibung ein

Der Anrufbaum zeigt die nach 'Laufzeit' geordneten Beispiele, die die Daten nach Wanduhrzeit anzeigen. Rechts neben den Baumelementen befinden sich hellere graue Namen, die angeben, woher der Code stammt. Beachten Sie, dass Elemente aus JavaScript, Gecko oder Systembibliotheken stammen können. Beachten Sie, dass die Symbolisierung möglicherweise noch nicht abgeschlossen ist, wenn einige Funktionen noch nicht richtig benannt sind.

Tipp: Sie können mit der rechten Maustaste auf einen Funktionsnamen klicken, um eine Option zum Kopieren seines Namens in die Zwischenablage zu erhalten.

3. Freigeben des Profils Klicken Sie auf "Freigeben ..."> Freigeben, um zu bestätigen, dass die von Ihnen geöffneten URLs und Ihre Firefox-Erweiterungen in den an den Server gesendeten Profildaten enthalten sind. Wenn Sie einen anderen Zeitraum auswählen, ändert sich die durch Drücken von "Permalink" angezeigte URL, sodass Sie sicher sein können, dass der Empfänger der URL dieselben Dinge sieht, die Sie sehen.

Vignesh Kumar A.
quelle
Verhält sich der Firefox-Profiler anders als die Safari- oder Chrome-Profiler? Nach meiner Erfahrung profilieren sie die Registerkarte / Seite für das Remote-Debugging selbst und nicht die laufende React Native-Anwendung.
Craig Otis