- PVSM.RU - https://www.pvsm.ru -
React — это один из ведущих фронтенд-фреймворков не только потому, что за ним стоит Facebook, но и благодаря его высокой производительности. Виртуальный DOM React известен благодаря эффективному рендерингу компонентов. Но как быть, если эти компоненты внезапно становятся не такими уж и быстрыми? Куда стоит посмотреть? Как это исправить?
В данном материале, на примере реального React-приложения, будут показаны новые мощные средства мониторинга производительности кода с использованием инструментов разработчика Chrome. Этими средствами может воспользоваться любой React-разработчик для поиска проблем в медленных компонентах.
Для того, чтобы воспроизвести то, о чём мы будем говорить, вам понадобится следующее:
Для начала вам понадобится достаточно рабочего места, поэтому откройте инструменты разработчика Chrome в отдельном окне и разверните это окно настолько, насколько позволяет экран монитора.
Настройка инструментов разработчика Chrome
Выполняя тесты производительности, важно стремиться к моделированию реальных условий, в которых будет выполняться приложение. Не у всех есть компьютеры за $3000 или последние модели телефонов.
К счастью, разработчики Chrome позаботились о таких сценариях тестирования, тут есть возможность замедлить выполнение JavaScript. Благодаря этому мы сделаем проблемы с производительностью более очевидными. К тому же, если вам удастся сделать код быстрым на медленном (или специально замедленном) устройстве, на обычном компьютере такой код будет прямо-таки летать.
Искусственное замедление производительности
Если замедлить современный MacBook, как минимум в 4 раза, его производительность окажется сравнимой с Motorola Moto G4.
Когда React 16 работает в режиме разработки, он генерирует для каждого компонента события mark
и measure
, которые являются частью User Timing API [2].
Для того, чтобы создать профиль производительности, нужно перейти на страницу, которую вы хотите испытать (на локальном хосте) и нажать на кнопку Start profiling and reload page
в инструментах разработчика.
Благодаря этому начнётся запись сведений о производительности для текущей страницы. Chrome автоматически прекратит записывать данные после того, как страница полностью загрузится и отобразится на экране.
Запуск профилирования
После того, как данные о производительности будут записаны, вы увидите нечто, напоминающее следующий рисунок.
Результаты профилирования
Здесь, слева направо, можно видеть то, что происходит со страницей в процессе загрузки и инициализации.
Уделим некоторое время рассмотрению сведений о профиле производительности, смысл которых может быть неочевиден для тех, кто впервые сталкивается с анализом производительности в Chrome. На рисунке то, о чём мы будем говорить, отмечено цифрами 1 и 2.
Сегодня мы сосредоточимся на том, что называется здесь Scripting —
то есть — на производительности JavaScript.
Анализ профиля производительности приложения
Развернём окно, откроем группу User Timing
и воспользуемся возможностью просмотра скриншотов страницы, сделанных в ходе её загрузки, для того, чтобы исследовать то, как именно выводится страница.
Теперь мы собираемся изучить ту область, на которой имеется вышеописанная красная полоска. Мы можем видеть, что в это время на странице выводятся элементы.
Увеличьте масштаб отображения нужного участка. Видите значки ?
При увеличении масштаба выводится информация из раздела User Timing
и компонент с меткой Pulse
(тот, на вывод которого уходит 500 мс.).
Ниже компонента Pulse
можно заметить сведения о рендеринге дочерних компонентов, но размер соответствующих элементов указывает на то, что они не создают особой нагрузки на систему.
Определившись с компонентом, который будем исследовать, займёмся поиском медленных функций. На рисунке ниже можно видеть окно инструментов разработчика Chrome с пронумерованными шагами, содержание которых мы сейчас опишем.
Поиск медленных функций
Pulse
. Благодаря этому в нижней части окна будут выводиться лишь действия из этого компонента.
Bottom-Up
.
Total Time
. В некоторых случаях может пригодиться сортировка по показателю Self Time
, или группировка по чему-то отличающемуся от URL. Что именно подойдёт в вашем случае, вы поймёте в процессе работы.
map
. Он выполняется много раз и занимает почти 90 мс.
MetricStore.js:59
позволяет увидеть соответствующий участок исходного кода приложения. Взглянем на него.
Переход к исходному коду
Код, исполнение которого занимает больше всего времени, отмечен соответствующим показателем слева (возможно, это не лучший мой код, который стоит выставлять на всеобщее обозрение). Теперь, когда вы знаете, где именно таится проблема, вы можете её исправить.
Используя этот подход последние пару недель, я на секунды ускорил выполнение областей кода, о которых думал: «Нет, это сложно, наверное, чтобы хоть что-нибудь тут улучшить, понадобится очень много времени». Теперь я точно знаю, как и где искать проблемы с производительностью JavaScript и уверен, что в дальнейшем буду писать более качественный код.
React публикует метрики через User Timing API
, которое можно использовать и для размещения маркеров времени в вашем собственном коде. Это позволяет, например, узнать, сколько времени занимает инициализация компонента, или через какое время после определённого события пользователь нажмёт кнопку Купить. Вот [3] хороший материал про User Timing API
.
Так что, в Chrome встроены не средства для отладки React, а поддержка универсального API, которым пользуется React. Кроме того, все основные браузеры поддерживают User Timing API
, но вкладка Performance
инструментов разработчика Chrome пошла намного дальше других, что значительно облегчило отладку React-приложений в Chrome.
В том, что касается скорости работы приложений, не бывает мелочей — тут важна каждая доля секунды. Надеемся, этот материал помог вам улучшить навыки исследования и оптимизации производительности приложений.
Уважаемые читатели! Как вы анализируете производительность веб-приложений?
Автор: ru_vds
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/razrabotka/269911
Ссылки в тексте:
[1] Image: https://habrahabr.ru/company/ruvds/blog/343888/
[2] User Timing API: https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
[3] Вот: https://www.html5rocks.com/en/tutorials/webperformance/usertiming/
[4] Источник: https://habrahabr.ru/post/343888/
Нажмите здесь для печати.