ЧТО ДЕЛАТЬ, ЕСЛИ REACT-ПРИЛОЖЕНИЕ РАБОТАЕТ МЕДЛЕННО

React – JavaScript-библиотека для создания пользовательских интерфейсов. Сам по себе React довольно быстр, но существуют причины, из-за которых приложение может работать довольно медленно. В данном случае не все проходит так гладко, как следовало бы, учитывая тот факт, что используется «React», в причинах медленной работы не так легко разобраться. В данной статье представлен список шагов, которые необходимо выполнить, чтобы выявить проблемы с производительностью в приложении React.

Определение пользователя

Первое, что необходимо сделать, это определить аудиторию. У разных пользователей разные устройства, что означает разную мощность процессора и графического процессора. Если аудитория состоит в основном из пользователей мобильных устройств, то появляются новые сложности, которых нет у пользователей настольных компьютеров. Кроме того, ориентируясь на широкий спектр возрастных групп, есть вероятность, что людей с медленными и низкокачественными ПК будет намного больше, чем если бы работа происходила только с молодежью. Решение данной проблемы заключается в использовании возможности управления процессором в браузере (находится на вкладке «Производительность»).

Если приложение построено по принципу «mobile-first», то замедление процессора в 4 раза может помочь, если приложение написано для настольных компьютеров, то замедление может даже не потребоваться (в зависимости от параметров ПК). Прежде чем классифицировать что-либо как «медленное», необходимо убедиться, что имитация среды обычного пользователя происходит наилучшим образом.

Проверка используемой версии React

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

React developer tools может помочь со сбором информации необходимой для оптимизации. Данный набор инструментов включает в себя два действительно важных инструмента для анализа производительности. Первый инструмент – возможность добавления мигающей границы на компоненте, который был перерисован.

Данная функция позволяет получить общее представление о частоте обновлений компонентов. Когда «флажок» активирован, необходимо выполнять действия, имитируя пользователя, и наблюдать за частотой обновления компонентов. Цель данного приема заключается в приближении к месту, где находится проблема. Представленный метод сам по себе не поможет решить проблемы, но определит потенциального кандидата на решение проблем. Компонент, который часто обновляется, будет способствовать общему замедлению, бывают также случаи, когда компонент может обновляться редко, но его рендеринг очень дорог, что фактически влияет на общую производительность приложения.

Получение точных данных с React Profiler

Profiler является основным инструментом, который необходимо использовать для понимания рендеринга приложения, его можно найти на вкладке «Profiler» в React developer tools.

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

Как правило, если общий рендеринг приложения составляет меньше 16мс, потребность в оптимизации отпадает. Почему 16мс? Максимальное количество времени, которое браузер может потратить на выполнение задачи без потери кадров, составляет примерно ~ 16мс, поэтому, если рендеринг занимает меньше этого времени, можно смело предполагать, что приложение в порядке с точки зрения производительности. Конечно, во многих случаях рендеринг приложения может занимать гораздо больше времени, но это все еще может хорошо работать. Все связано с тем, как приложение представляет свой пользовательский интерфейс, если приложение имеет динамический пользовательский интерфейс, построенный на большом количестве анимаций, то потеря некоторых кадров будет быстро заметна пользователям. С другой стороны, если приложение имеет в основном статический пользовательский интерфейс, то даже рендеринг в 80мс может не показаться медленным.

При определении времени рендеринга компонента профилировщик предоставляет информацию, какой компонент является самым дорогим (с точки зрения времени рендеринга), по flame-диаграмме. Чем цвет более оранжевый, тем дороже компонент. Эта информация полезна, но она не подразумевает и не должна автоматически означать, что компонент необходимо оптимизировать. Flame-диаграмма предназначена для сравнения времени рендеринга компонентов в пределах одной фазы рендеринга. Это не означает, что рендеринг этого компонента является дорогостоящим, он просто дороже, чем рендеринг другого компонента.

Огромным преимуществом Profiler является то, что существует возможность просмотра структуры рендеринга компонентов, в то время, когда он не должен происходить (когда реквизиты не изменились). Эти компоненты могут легко извлечь выгоду из bail-out-методов рендеринга, таких как PureComponent и memo. При правильном использовании компоненты, которые не должны отрисовываться, будут отображены бледно-серым цветом, что послужит указанием на то, что React повторно использовал выходные данные из предыдущего цикла визуализации, не проходя процесс согласования для этого компонента.

Далее представлен один из способов использования React Profiler:

• Изолировать действия, которые делают приложение неработоспособным.

• Создать запись, во время которой воспроизводятся шаги, замедляющие работу приложения.

• Проанализировать общее количество рендеров.

• Проанализировать общее время рендеринга каждой фазы визуализации.

• Изучить стек дорогих компонентов рендеринга, выделив компоненты, которые в наибольшей степени способствуют замедлению общего времени рендеринга.

• Исследовать подкомпоненты, которые могут извлечь выгоду из bail-out-методов.

• Найти подкомпоненты, которые могут получить выгоду из методов запоминания. Иногда массив или объект могут быть излишне пересчитаны, тратя ресурсы основного потока.

Глубокий поиск проблем с помощью Chrome developer tools

Несмотря на то, что Profiler великолепен, он просто выводит, сколько времени занял рендеринг. В большинстве случаев этого более чем достаточно, но иногда необходимо полностью понять, что именно делает этот конкретный рендеринг таким медленным. Идеальным инструментом для этого является анализ производительности, предлагаемый Chrome developer tools. Этот набор инструментов работает точно так же, как профилировщик, но вместо вывода времени рендеринга каждого компонента, он предоставит вам все время создания сценариев, рисования и рендеринга приложения. Чтобы выразить это с точки зрения непрофессионала, он скажет вам, какие функции где вызывались, сколько времени браузер потратил на вычисление положений элементов на экране, а также насколько дорогостоящей была каждая визуализация.

Заключение

Проблема плохой производительности одна из важных проблем, которая возникает при запуске готового приложения. Правильная имитация среды пользователя и использование производственной версии React, позволят ускорить производительность готового приложения, при необходимости можно проверить количество компонентов, которые повторно визуализируются с помощью React Profiler. Профилировщик помогает ускорить работу в 95% случаев, поскольку большинство узких мест в производительности создаются в результате структурирования кода. Если профилировщик не смог помочь в определении и решении проблемы, существует набор инструментов в браузере, который находится на вкладке «Performance». Последний гарантировано даст ответ на поставленную проблему.

Список литературы:

1. reactjs.org [Электронный ресурс] //Официальный сайт React – Режим доступа – URL: https://ru.reactjs.org
2. Статья «Debug React Components with Developer Tools in Chrome» [Электронный ресурс]// Информационный ресурс egghead.io– Режим доступа – URL: https://egghead.io/lessons/developer-tools
3. Статья «The React Developer Tools You Should Know in 2019» [Электронный ресурс] // Информационный ресурс hackernoon.com  - Режим доступа – URL: https://hackernoon.com/the-react-developer-tools-you-should-know-in-2019-e681dc4f4332