Як профіль React Native вихідний код за допомогою Xcode / Instruments / Time Profiler


19

Ми використовуємо React Native 0.59.10і React-Redux 5.0.7, і у нас виникає проблема з продуктивністю, пов'язаною з процесором, в результаті якої наші дії Redux займають приблизно 0,25 секунди.

Ми профілювали, використовуючи конфігурацію Time Profiler в інструментах, але жоден наш JS-код не символізується.

Віддалене налагодження в Chrome, здається, просто налагоджує сторінку "віддаленого інспектора", що абсолютно не допомагає.

Чи є спосіб побудувати / приєднати карту джерела або символізувати адреси пам'яті, які бачать нижче, до імен / викликів функцій JS?

Інструменти Callstack


Якщо ви використовуєте експо, ви можете запустити додаток безпосередньо в хромі та налагодити його там.
Mykybo

Ні, ми використовуємо велику кількість нативних компонентів, і в результаті Expo - це не варіант.
Крейг Отіс

Відповіді:


1

Firefox Profiler

Розуміння Firefox Profiler

Профілер Firefox має більш сучасну документацію, доступну на веб-сайті profiler.firefox.com/docs/. Однак нижче може містити деяку корисну інформацію для специфічних для Гекона проблем.

Ви можете ознайомитися з деякими часто заданими питаннями про Firefox Profilers.

Повідомлення про проблему з продуктивністю містить покрокове керівництво щодо отримання профілю на вимогу розробників Firefox.

1. Хронологія

Тимчасова шкала має декілька рядків маркерів відстеження (кольорові сегменти), які вказують на цікаві події. Наведіть курсор на них, щоб переглянути більше інформації. Внизу маркерів відстеження є рядки, відповідні активності на різноманітних нитках.

Порада. Нитки, які позначаються за допомогою "[за замовчуванням]", є у батьківському (також "UI", він же "хром браузера", також "основний"), а ті, що позначаються з "[вкладкою" ", містяться у веб-вмісті (він же "дитячий") процеси.

введіть тут опис зображення

Порада: тривалі завдання батьківського процесу блокують весь вхід чи малюнок за допомогою інтерфейсу веб-переглядача (він називається "юнк UI"), тоді як тривалі завдання в контентному процесі блокують інтерактивність зі сторінкою, але все одно дозволяють користувачеві робити панорамування та збільшення масштабу завдяки APZ.

Трасування маркерів

Red: Це вказує на те, що цикл подій не відповідає. Зауважте, що події з високим пріоритетом, такі як vsync, сюди не включаються. Також зауважте, що це вказує на те, що сталося б, якби на подію чекали події, а не обов'язково, що на такий час тривала подія.

Black: Вони вказують на синхронні IPC-дзвінки.

2. Древо дзвінка

введіть тут опис зображення

Дерево виклику показує зразки, організовані "Час виконання", який відображатиме дані за настінним годинником. Праворуч від елементів дерева розташовані світліші сірі назви, які вказують, звідки походить код. Майте на увазі, що елементи можуть бути з JavaScript, Gecko або системних бібліотек. Зауважте, що якщо деякі функції ще не названі належним чином, символізація може ще не закінчитися.

Порада: Ви можете клацнути правою кнопкою миші на ім'я функції, щоб отримати можливість копіювати її ім'я у буфер обміну.

3. Спільний доступ до профілю Натисніть "Надіслати ..."> Поділитися, визнаючи, що відкриті вами URL-адреси та ваші розширення Firefox будуть включені в дані профілю, надіслані серверу. Якщо вибрати інший часовий діапазон, URL-адреса, виявлена ​​натисканням кнопки "Постійне посилання", зміниться, так що ви можете бути впевнені, що одержувач URL-адреси побачить ті самі, що ви бачите.


Чи поводиться профайлер Firefox інакше, ніж профілі Safari чи Chrome? На мій досвід, вони надають профіль віддаленій вкладці / сторінці самої налагодження, а не запущеному додатку React Native.
Крейг Отіс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.