Как профилировать исходный код React Native с помощью Xcode / Instruments / Time Profiler

19

Мы используем React Native 0.59.10и React-Redux 5.0.7и испытываем проблему с производительностью процессора, в результате чего наши действия Redux требуют ~ 0,25 с.

Мы профилировали, используя конфигурацию Time Profiler в Instruments, но ни один из нашего кода JS не обозначен символом.

Удаленная отладка в Chrome, кажется, просто отлаживает страницу «удаленного инспектора», которая совершенно бесполезна.

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

Инструменты Callstack

Крейг Отис
источник
Если вы используете expo, вы можете запустить приложение прямо в Chrome и отладить его там.
Mykybo
Нет, мы используем большое количество нативных компонентов, и в результате Expo не вариант.
Крейг Отис

Ответы:

1

Firefox Profiler

Понимание Firefox Profiler

Firefox Profiler имеет более актуальную документацию, доступную по адресу profiler.firefox.com/docs/. Однако следующее может иметь некоторую потенциально полезную информацию для специфических проблем Gecko.

Вы можете проверить некоторые часто задаваемые вопросы о Firefox Profilers.

Отчет о проблемах с производительностью содержит пошаговое руководство для получения профиля по запросу разработчиков Firefox.

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

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

Подсказка: потоки, помеченные «[по умолчанию]», находятся в родительском процессе (он же «пользовательский интерфейс», он же «браузер хром», он же «основной»), а ноты, помеченные «[tab]», находятся в веб-контенте (он же). "ребенок") процессов.

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

Совет: Длительные задачи в родительском процессе будут блокировать весь ввод или рисование с помощью пользовательского интерфейса браузера (так называемый «пользовательский интерфейс»), в то время как долгосрочные задачи в процессе содержимого будут блокировать интерактивность со страницей, но при этом пользователь сможет панорамировать и увеличить вокруг благодаря APZ.

Маркеры трассировки

Red: Они указывают на то, что цикл событий не отвечает. Обратите внимание, что события с высоким приоритетом, такие как vsync, здесь не включены. Также обратите внимание, что это указывает на то, что произошло бы, если бы событие было ожидающим, и не обязательно, что это событие ожидало так долго.

Black: Они указывают на синхронные вызовы IPC.

2. Дерево вызовов

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

Дерево вызовов показывает сэмплы, упорядоченные по «Run Time», которые показывают данные по времени настенных часов. Справа от элементов дерева есть светло-серые имена, указывающие, откуда исходит код. Помните, что элементы могут быть из JavaScript, Gecko или системных библиотек. Обратите внимание, что если некоторые функции еще не названы должным образом, символизация может быть еще не закончена.

Совет: Вы можете щелкнуть правой кнопкой мыши на имени функции, чтобы получить возможность скопировать ее имя в буфер обмена.

3. Совместное использование профиля Нажмите «Поделиться ...»> Поделиться, подтверждая, что URL-адреса, которые вы открыли, и ваши расширения Firefox будут включены в данные профиля, отправленные на сервер. Если вы выберете другой временной диапазон, URL, отображаемый нажатием «Постоянная ссылка», изменится, так что вы можете быть уверены, что получатель URL увидит то же, что и вы.

Виньеш Кумар А
источник
Профилировщик Firefox ведет себя иначе, чем профилировщики Safari или Chrome? По моему опыту, они профилируют вкладку / страницу удаленной отладки, а не работающее приложение React Native.
Крейг Отис