ReactJS сочетает в себе скорость JavaScript с уникальными возможностями рендеринга, чтобы сделать приложения, которые являются высокодинамиыми, ориентированными на производительность и реагирующих на пользовательский ввод.
Состояние JS доклад 2018 цитирует
производительность в качестве основной причины ReactJS приобрела такую популярность в такое короткое время. Когда дело доходит до вариантов создания одностраничных приложений (SPAs), React предоставляет преимущества производительности перед Angular и другими рамками и библиотеками JavaScript. Поскольку React поддерживает виртуальный DOM в JavaScript, он может быстро определить минимальные изменения, необходимые для довести документ до нужного состояния. Поскольку состояние компонента React сохраняется в JavaScript, вы можете избежать доступа к DOM.
Для небольших приложений оптимизация производительности, которую ReactJS поставляет из коробки, более чем достаточна. Однако по мере того, как ваши приложения развиваются, чтобы включать более сложные представления, поддержание и параллелирование виртуальных DOM может стать дорогостоящим делом. Большое приложение огромное, разветвленное и сложное дерево рендера. Всякий раз, когда вы обновляете реквизит до узла, React должен перенастроить дерево рендеров из узла вплоть до ветвей и, наконец, листа, где происходят виртуальные сравнения DOM.
Тем не менее, по мере роста пользовательской базы, приложение имеет тенденцию к росту сложностей, нести больше зависимостей, и включить больше сторонних плагинов. Его вероятность попадания в узкие места производительности только расширяется. Умножьте это с постоянно растущим числом приложений на миллионах устройств с поддержкой Интернета различных размеров и типов, и вы не можете избежать потенциального кошмара производительности вниз по линии.
Например, пользователи ожидают 60 кадров в секунду при взаимодействии с веб-приложением в браузере, что дает вам только 16,7 мс для визуализации каждого кадра. Когда ваше приложение работает медленно, часто слишком много времени занимает реагирование на события пользователя, слишком много времени занимает обработка данных или повторное рендерия новых данных. В большинстве случаев вы не делаете сложную обработку данных на часах – вы тратите время на перео рендеринг.
Без сомнения, даже самое безупречно разработанное и оптимизированное приложение React требует инструмента мониторинга производительности.
Мониторинг компонентных гор с помощью профайлеров
Количество повторной визуализации компонентов, а также количество ресурсов и затякое время могут многое сказать о производительности приложения React в производстве. Компонент Profiler — это встроенный компонент React, который измеряет время «монтажа» или «обновления» подтрибного компонента. всякий раз, когда компонент обновляется или монтируется, функция Profiler onRender штампуется временем. Profiler предоставляет доступный способ просмотра проблем в приложениях React.
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
Идентификатор реквизита идентифицирует отчетность, в то время как функция onRender связана с аргументами, когда компонент Counter установлен или пересмотрен.
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
Аргументы функции собирают отметки времени при визуализации компонента Counter. Мы посмотрим на каждый из параметров.
ID. Уникальный идентификатор, связанный с компонентом Profiler.
фазы. Это определяет фазу, будь то в фазе “монтажа” или фазы “обновления”.
фактическое время. Время, затыкаемое Profiler для визуализации совершенных обновлений.
базовое время. Время, затяженное одним из компонентов дерева Profiler для монтажа или обновления.
startTime. Регистрирует время штамп Profiler начинает измерения крепления / визуализации времени для своих потомков.
коммитайм. Время React потребовалось, чтобы совершить обновление.
Компоненты мониторинга, которые повторно отображаются с помощью инструментов разработчика React
Во время разработки, если вы узнаете, какой компонент повторно визуален, это может спасти ваше приложение в производстве от различных узких мест производительности. React Developer Tools делает это простым для разработчика, раскрашивая границы компонентов всякий раз, когда они переокрашиваются. Если основные компоненты повторно отображаются, края, которые захватывают компоненты Counter и Count, будут кратко выделены.
Тип цвета, который появляется, зависит от того, как часто/часто компонент повторно отображается, что дает вам возможность легко определить, какой компонент обновляется чаще всего, так что вы можете оптимизировать его соответствующим образом.
| зеленый – низкочастотное обновление
| синий – среднее обновление частоты
v красный – обозначает очень частое обновление
Выявление проблем Perf с React.addons.Perf
Чтобы начать Perf, вы должны позвонить Perf.start () с консоли, записать действие и вызвать Perf.stop(), чтобы остановить Perf. Затем можно вызвать любой из следующих методов для просмотра наборов полезных измерений.
Perf.printWasted()
Perf.printWasted () является наиболее полезным методом вы называете React.addons.Perf. Perf.printWasted ()говорит вам количество времени, потерянного подряда рендер дерево и сравнения виртуальных DOMs друг с другом. Эти компоненты, упомянутые выше, являются основными кандидатами для повышения производительности приложения React.
Perf.printInclusive() / Perf.printExclusive()
Perf.printInclusive () и Perf.printExclusive () возвращают время, которые он присвоил для визуализации компонентов. Большинство разработчиков не найдут этот метод очень полезным, так как проблемы с производительностью, вызванные рендерингом, обычно решаются, не рендеринг с помощью вышеуказанного метода: Perf.printWasted().
Тем не менее, метод может помочь вам определить компоненты, которые выполняют тяжелые вычисления в методах жизненного цикла. Вы узнаете, что после устранения проблем с printWasted именно ваш неоптимизировал код приложения, который затравляет эти драгоценные ресурсы. Кроме того, вы можете принести стандартный Chrome DevTool в JavaScript Profiler и взглянуть на самые тяжелые функции вызовов напрямую.
Perf.printDOM()
Perf.printDOM () показывает все операции DOM, срабатываемые во время рендеринга деревьев React. Если вы играли с ReactJS в течение довольно продолжительного времени, то вы знаете, что это, пожалуй, самая громоздкая часть. Для просмотра бесконечного списка строк и столбца, если ваше приложение довольно сложно, может занять вечность, чтобы обнаружить, что именно пошло не так.
После того, как ваш первый набор компонентов будет отрисовирован, вы ожидаете, что будущие перерисовки будут повторно использовать существующие узлы DOM, а не создавать новые узлы – оптимизация, предоставляемая виртуальным DOM React и предоставленная каждым разработчиком React.
Perf.printDOM () пригодится, чтобы найти своеобразные, дорогие странности браузера или контролировать основные, непредсказуемые модификации DOM.
Синтетический мониторинг веб-приложений ReactJS
Хотя вышеупомянутые методы являются неотъемлемой частью мониторинга производительности приложения React, они не имитируют действия, выполняемые типичным пользователем при использовании приложения. Платформа синтетического мониторинга в
сочетании с регистратором скриптов
может запускать и воспроизводить предварительно записанные скрипты, имитируя пользовательские транзакции и типичные действия пользователей в реальном браузере. Например, базовая навигация, представления форм, транзакции по магазинам, онлайн-игры, скорость прокрутки, анимация и т.д.
В то время как Perf является отличным инструментом для мониторинга количества времени, потерянного в рендеринге дерева и сравнении виртуального DOM с фактическим DOM, он не переводится на то, что пользователи могут испытывать при использовании приложения. Синтетические решения для мониторинга веб-приложений, такие как те, которые предлагает Dotcom-Monitor,
состоят из простого в использовании инструмента для написания различных сценариев тестирования мониторинга.
Эти скрипты могут работать в частной тестовой среде и регулярно проверяет веб-приложение на различные параметры. Использование синтетического инструмента мониторинга, используя реальные браузеры, позволяет получить наиболее точные результаты производительности.
Кроме того, синтетический мониторинг может выполняться с помощью различных устройств, браузеров и географических местоположений. При одностраничных приложениях начальная скорость загрузки страницы не так важна, как у конечных пользователей. Важно не только обеспечить работу приложений, но и контролировать функциональность. Например, пользователи могут выполнять необходимые действия, а также то, что, если таковые имеются, сторонние службы или API вызывают задержки или проблемы.
Целью мониторинга веб-приложений является автоматизация процесса выявления проблем до того, как они затронут большее число пользователей. С помощью синтетического мониторинга можно настроить оповещения на основе требований к конкретному приложению React и немедленно получать уведомления о том, когда что-то пойдет не так. В отличие от других инструментов, о них говорилось выше, синтетический мониторинг использует упреждающий подход, освобождает вас от трудоемкого процесса, от которого вам и вашей команде требуется запускать ручные тесты.
Мониторинг приложений ReactJS: Заключение
Хотя эти инструменты полезны для мониторинга приложений React в средах разработки, мониторинг производительности в производстве является проблемой другой величины и имеет больше веса. Предоставление в “работает на моей машине” менталитет является предостерегающий рассказ, когда производительность вашего приложения в производстве находится под угрозой. Синтетические инструменты мониторинга, с другой стороны, дают вам отчеты о производительности с точки зрения конечных пользователей, а не из некоторых тестовых случаев клише, воображаемых разработчиками. Тем не менее, если вы хотите выровнять свой мониторинг производительности ReactJS, получите бесплатную 30-дневную пробную версию Dotcom-Monitor сегодня.
