Использование инструментов разработчика Chrome + профилирование компонентов React

Вступление

В наши дни существует множество кошмарных ситуаций, с которыми сталкиваются веб-разработчики, и включают в себя не только рутинный вопрос Как я могу уложиться в этот срок?, Но также и операционные проблемы, такие как База данных только что вышла из строя, а у нас нет резервное копирование!". Что отличает увлеченного от профессионального разработчика, так это время, которое вы вкладываете в определение рисков, с которыми вы сталкиваетесь, и принятие мер по их снижению (см. «Разработка приложений: рискованный бизнес).

Один общий кошмар - это день, когда вы понимаете, что Эй! Теперь у нас nnn K пользователей! Фантастически! , А затем обнаружил: Вот дерьмо! Приложение поддерживает только 75% этих пользователей !!! Что мы будем делать?". На этом этапе ваш единственный жизнеспособный вариант - определить и устранить основную причину. Если проблема связана с архитектурой приложения, это может потребовать значительных усилий и времени. На данный момент это единственный товар, которого у вас нет, поскольку пользователи будут жаловаться и «бросать ваше приложение, что будет стоить вам как репутации, так и дохода.

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

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

Во второй части мы будем использовать инструменты разработчика Chrome и профилирование компонентов React, чтобы проанализировать работающее приложение React и продемонстрировать, как находить и устранять проблемы с производительностью.

Ящик для инструментов

Два инструмента, на которых мы сосредоточимся в этом обсуждении, - это параметр Производительность в Инструментах разработчика Chrome и Профилирование компонентов React (также известное как? React_perf). Это далеко не единственные доступные инструменты, но они первые, к которым вы должны обратиться в своем наборе инструментов Web Dev при запуске анализа приложения React.

Еще одно замечание: хотя в приведенных ниже примерах используется браузер Chrome, другие браузеры также поддерживают сопоставимые инструменты разработчика. Хотя Chrome является хорошей отправной точкой, вам нужно выбрать браузер и набор инструментов, которые лучше всего соответствуют вашим потребностям.

Инструменты разработчика Chrome - производительность

В современной культуре слово «Awesome» слишком часто используется в превосходной степени, но в случае с инструментами разработчика Chrome его использование оправдано. Эти инструменты обеспечивают функциональность браузера Chrome, что позволяет разработчику:

  • Имитируйте различные типы устройств, например телефоны и планшеты.
  • Тестируйте адаптивные и зависящие от устройства окна просмотра
  • Эмуляция сенсора
  • Проверять и редактировать CSS и DOM
  • Проверьте содержимое журнала консоли
  • Просмотр и отладка кода Javascript
  • Просмотр сетевой активности
  • Профиль активности процессора Javascript
  • Выявление и устранение проблем с памятью
  • Отладка прогрессивных веб-приложений
  • Проверять и управлять хранилищем, базами данных и кешами
  • Проверять и удалять файлы cookie
  • Изучить ресурсы
  • Понять проблемы безопасности

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

Кроме того, временную шкалу можно сохранить и предоставить к ней общий доступ, чтобы обеспечить совместную работу всей команды и поддержать установление базовой производительности для сравнения. Базовый план создает контрольную точку, которая позволяет вам измерить влияние изменений на производительность, чтобы вы могли ответить на такие вопросы, как «Какое влияние это изменение оказало на производительность?» и «Если производительность была затронута, какова была степень воздействия?».

Использование инструментов разработчика Chrome - производительность

Чтобы открыть окно инструментов разработчика, нажмите кнопку «Настройка и управление Chrome», три вертикальные точки в правом верхнем углу окна Chrome и выберите «Дополнительные инструменты» → «Инструменты разработчика».

Окно вашего браузера теперь будет выглядеть примерно так:

Первое, что вы заметите, - это окно браузера, которое теперь разделено на две части: панель вашего приложения находится слева, а панель инструментов разработчика - справа. Вы можете увидеть различное расположение панелей в зависимости от настроек вашего браузера, но вы сможете различать эти две панели.

Ключевые элементы этих панелей:

  1. Инструменты разработчика содержат различные группы задач и отображают информацию, уникальную для той, которая выбрана в данный момент. Эта панель содержит интерактивный список этих групп задач. Нас интересует «Производительность», которая не отображается. Однако при нажатии кнопки «›› отображается список оставшихся групп.
  2. Содержимое этой области зависит от выбранной вами группы. В этом случае «Элементы» отображают страницы HTML.
  3. Левая панель содержит окно вашего приложения.
  4. На этой панели может отображаться дополнительная информация в зависимости от выбранной вами группы задач. В этом случае отображается таблица стилей CSS для страницы приложения, поскольку мы находимся в группе задач «Элементы».
  5. Вы можете увеличить или уменьшить размер каждой панели, щелкнув и перетащив разделитель, разделяющий панель приложения и панель инструментов разработчика. Как вы скоро обнаружите, это весьма полезно, поскольку группа задач «Производительность» содержит довольно много информации, и вам потребуется больше места на экране, чтобы ее можно было просматривать и анализировать.

Использование инструментов разработчика Chrome - профилирование вашего приложения

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

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

Когда вы остановите сбор данных о производительности, инструменты разработчика обработают данные о производительности, отформатируют их и отобразят результаты на панели инструментов разработчика.

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

  1. Полоса временной шкалы показывает, когда данные о производительности были записаны в пределах начального и конечного времени профиля. Это выражается в миллисекундах от начала профиля.
  2. Эта полоса показывает, где приложение потребляло время и ресурсы. Цвета на этих мини-графиках соответствуют активности, показанной в разделе «Сводка» в нижней части панели. Как и на любом графике, высота представляет собой количество потребляемых ресурсов.
  3. Полоса снимка экрана показывает состояние пользовательского интерфейса в каждой точке временной шкалы. Щелчок по снимку экрана в этом бэнде или по точке в любом из бэндов фокусирует отображение на этой точке на временной шкале. Это полезно для навигации по данным производительности при проведении анализа производительности.
  4. Основная полоса шкалы времени разделена на приращения по 1000 мс. Эта полоса более детализирована и показывает время с шагом, когда произошло событие приложения.
  5. Следующие шесть полос представляют определенные категории действий и связывают их с точками в приложении, которые их инициировали.
  6. Цветные полосы справа показывают, сколько времени было потрачено на каждый тип действия. Это позволяет определить, на что было потрачено время в приложении. Важно отметить, что сюда входит не только время в приложении, но и время в любых библиотеках, от которых зависит приложение. Прокрутка в этой области увеличивает или уменьшает временной интервал. Если щелкнуть стрелку рядом с названием группы, откроется более подробное представление данных о производительности, включая названия функций, на которые было потрачено время.
  7. В разделе «Сводка» в нижней части панели «Инструменты разработчика» показаны очень широкие категории, в которых приложение проводило больше всего времени. Типы сводки, которые могут быть представлены, включают общую сводку, снизу вверх, дерево вызовов и журнал событий, которые настраивают данные, представленные в нижней части раздела сводки. На экране, показанном выше, выбрано «Снизу вверх», чтобы раздел сводки был отсортирован в убывающей последовательности по времени, затраченному на выполнение определенного типа действия. Например, пересчет стиля страницы.

Эти данные незаменимы при анализе производительности приложения, поскольку они определяют, на что тратится время. Эта информация может быть использована для разработки плана модификации приложения для повышения производительности.

Визуализация производительности React

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

Профилирование компонентов включается путем добавления строки ?react_perf в конец любого URL-адреса вашего приложения. Это дополняет информацию в инструментах разработчика Chrome данными, специфичными для React, как показано ниже.

  1. Когда профилирование компонентов включено, события жизненного цикла, специфичные для React, добавляются в визуализацию данных о производительности, включая имена функций и компонентов.
  2. Сводные данные дополняются дополнительными категориями, специфичными для React.

Этот раздел может быть коротким по сравнению с предыдущим, но во многих отношениях он более важен, поскольку данные, специфичные для React, добавляются для большей детализации. Как веб-разработчик, это позволяет вам определять изменения производительности вашего приложения, которые приведут к более значительным улучшениям производительности.

Процесс

Инструменты производительности важны, но то, как и когда вы их используете, важнее, чем сам инструмент. Это происходит из-за того, что инструменты сами по себе ничего не могут сделать. Важнее всего глубокое понимание как приложения, так и жизненного цикла React.

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

Установление эталона

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

Без эталонного теста влияние изменений на производительность - всего лишь предположение. Это больше о том, что вы чувствуете, а не о том, что происходит на самом деле.

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

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

Возможность сохранять и загружать профиль производительности - мощный инструмент, поскольку он позволяет вам как установить эталонный тест, так и поделиться им с другими членами вашей команды.

Улучшение рабочего процесса разработки с помощью анализа производительности

Установка эталонного теста - пустая трата времени, если он не используется для сравнения с профилем, созданным после внесения изменений в приложение. Один из способов использовать возможности инструментов разработчика - создать и сохранить тесты производительности для каждого из ваших сценариев использования приложений. Каждый раз, когда в вариант использования вносятся изменения, вы можете создать новый профиль производительности для сравнения с эталонным тестом.

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

Это может потребовать значительного объема работы. Но окупаемость может быть значительной, и с помощью инструментов создания сценариев и тестирования это можно до некоторой степени автоматизировать.

Улучшение тестирования перед производством развертывания

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

Вы также должны вовлечь всю команду в обсуждение производительности. Лучшая практика, которой следует придерживаться, - это попросить группу просмотреть изменения до того, как они будут переведены в производственную среду, и проанализировать результаты, полученные в результате анализа производительности, по сравнению с тем, что уже находится в производстве.

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

Заключение

Ориентация на производительность - это скорее требование современной разработки приложений, чем что-то необязательное. В связи с тенденцией перемещения приложений в облако и представления их более широкой аудитории становится все более важным уделять внимание производительности на начальном этапе разработки приложения, а не решать ее после завершения цикла разработки.

Большой шаг к этому - включение измерения производительности и настройки в процесс разработки и развертывания, а не то, что проводится только как часть производственного мониторинга. В наш современный век разработки веб-приложений обнаружение проблем с производительностью в производственной среде является сигналом неудачи. Успешные приложения обнаруживают и исправляют их в процессе разработки и развертывания.

Я надеюсь, что вы нашли это информативным, и с нетерпением жду любых вопросов и комментариев, которые могут у вас возникнуть. Во второй части мы применим инструменты и методы, представленные здесь, на практике, проведя анализ производительности в реальном приложении React.

Удачного дня, полудня или вечера и делайте великие дела!

Обновление от 9 декабря 2018 г.

Наконец, я завершил следующую статью Использование функции аудита Chrome DevTools для измерения и оптимизации производительности, в которой описывается и демонстрируется процесс настройки веб-приложений. Я надеюсь, что эта статья окажется для вас полезной, и с нетерпением жду ваших комментариев. Спасибо за такое терпение.

Что такое Чингу?

Присоединяйтесь к нам на Chingu.io, чтобы выйти из Учебного чистилища, присоединившись к одной из наших удаленных проектных групп Voyage, чтобы создавать приложения, совершенствовать жесткие навыки и изучать новые мягкие навыки. Мы помогаем разработчикам преодолеть разрыв между тем, чему они научились, и навыками, которые ищут работодатели.