Jak profilować React Natywny kod źródłowy za pomocą Xcode / Instruments / Time Profiler

Używamy React Native 0.59.10i React-Redux 5.0.7, i mamy problem z wydajnością związany z procesorem, w którym wykonanie naszych działań w Redux zajmuje ~ 0,25 s.

Profilowaliśmy przy użyciu konfiguracji Time Profiler w Instrumentach, ale żaden z naszych kodów JS nie jest symboliczny.

Zdalne debugowanie w Chrome wydaje się po prostu debugować stronę „zdalnego inspektora”, co jest całkowicie nieprzydatne.

Czy istnieje sposób na zbudowanie / dołączenie mapy źródłowej lub symbolizowanie adresów pamięci widocznych poniżej w nazwach / wywołaniach funkcji JS?

Firefox Profiler

Zrozumienie Firefox Profiler

Firefox Profiler ma aktualną dokumentację dostępną na stronie profiler.firefox.com/docs/. Jednak poniższe informacje mogą zawierać potencjalnie przydatne informacje dotyczące problemów specyficznych dla Gecko.

Możesz sprawdzić niektóre często zadawane pytania na temat Profiler Firefox.

Zgłaszanie problemu z wydajnością zawiera przewodnik krok po kroku dotyczący uzyskiwania profilu na żądanie deweloperów Firefoksa.

1. Oś czasu

Oś czasu ma kilka rzędów znaczników śledzenia (kolorowe segmenty), które wskazują interesujące wydarzenia. Umieść wskaźnik myszy nad nimi, aby wyświetlić więcej informacji. Poniżej znaczników śledzenia znajdują się rzędy odpowiadające aktywności na różnych wątkach.

Wskazówka: Wątki opatrzone adnotacją „[default]” znajdują się w procesie nadrzędnym (alias „UI”, alias „chrome przeglądarki”, alias „main”), a te z adnotacją „[tab]” znajdują się w treści WWW (alias procesy „potomne”).

Wskazówka: Długotrwałe zadania w procesie nadrzędnym będą blokować wszystkie dane wejściowe lub rysunki za pomocą interfejsu użytkownika przeglądarki (alias „UI jank”), podczas gdy długotrwałe zadania w procesie treści będą blokować interakcję ze stroną, ale nadal umożliwiając użytkownikowi panoramowanie i przybliżaj dzięki APZ.

Znaczniki śledzenia

Red: Wskazują, że pętla zdarzeń nie odpowiada. Pamiętaj, że zdarzenia o wysokim priorytecie, takie jak vsync, nie są tu uwzględnione. Zauważ też, że wskazuje to, co by się stało, gdyby zdarzenie czekało, i niekoniecznie, że zdarzenie trwało tak długo.

Black: Wskazują synchroniczne połączenia IPC.

2. Drzewo połączeń

Drzewo połączeń pokazuje próbki uporządkowane według „czasu działania”, które pokażą dane według czasu zegara ściennego. Po prawej stronie elementów drzewa znajdują się jaśniejsze szare nazwy, które wskazują, skąd pochodzi kod. Pamiętaj, że elementy mogą pochodzić z JavaScript, Gecko lub bibliotek systemowych. Zauważ, że jeśli niektóre funkcje nie są jeszcze poprawnie nazwane, symbolizacja może jeszcze nie zostać zakończona.

Wskazówka: Możesz kliknąć nazwę funkcji prawym przyciskiem myszy, aby uzyskać opcję skopiowania jej nazwy do schowka.

3. Udostępnianie profilu Kliknij „Udostępnij ...”> Udostępnij, potwierdzając, że adresy URL, które otworzyłeś, a rozszerzenia Firefoksa zostaną uwzględnione w danych profilu wysłanych na serwer. Jeśli wybierzesz inny zakres czasu, adres URL ujawniony po naciśnięciu przycisku „Permalink” zmieni się, dzięki czemu będziesz mieć pewność, że adresat URL zobaczy te same rzeczy, które widzisz.