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

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

В наши дни браузеры оснащены чрезвычайно хорошими и полезными инструментами. В качестве примера мы возьмем Google Chrome, но ожидаем найти аналогичные функции и в других браузерах. Особые почетные упоминания Mozilla и Microsoft Edge.

Инструменты разработчика можно найти в разделе Дополнительные инструменты — Инструменты разработчика или Ctrl-Shift-I (Cmd-Option-I на Mac). Функциональность заслуживает отдельной книги и даже может быть расширена с помощью плагинов (например, для React). Убедитесь, что установлены расширения, охватывающие ваш стек (см. Интернет-магазин Google).

Примечание. За этим значком в Chrome скрыта очень полезная функция:

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

Отладчики

В инструментах разработчика есть встроенный отладчик. Мы сделали видео, чтобы показать самые основные функции здесь — также посмотрите 2.1.9 Отладчики.

  1. debugger — если вы поместите выражение debugger; где-нибудь в свой код, Chrome остановится на этом и откроет отладчик. Но прекомпиляторы, такие как Babel, могут его не принять.
  2. Когда поток достигает точки останова, консоль можно использовать для взаимодействия с кодом, например, для установки переменных. Очевидно, что console.log() — одна из рабочих лошадок для отображения информации во время выполнения, но это не все (см. здесь)
  3. console.table() помогает отображать массивы объектов в удобном формате.
  4. console.trace('Header') выводит трассировку стека (подробности см. здесь). Трассировка стека предоставляет список вызовов подпрограмм.

Представление

Воспринимаемая производительность вашего приложения имеет огромное значение. Есть некоторые аспекты, которые мы хотим повторить:

  1. Архитектура вашего приложения должна быть устойчивой к небольшим проблемам с производительностью в любом элементе или слое. Он всегда должен корректно давать сбои (чтобы ошибки тайм-аута не всплывали на лицо пользователю).
  2. Убедитесь, что у вас есть показатели производительности, которые вы можете протестировать (лучший и, возможно, единственный способ сделать это объективно — это автоматизировать его).
  3. Производительность зависит от внешних факторов, таких как пропускная способность сети, память, ЦП, тип браузера, версия браузера, которые могут даже меняться во время выполнения вашего приложения. Хорошо, если у вас есть минимальные требования, определенные для среды выполнения.
  4. На самом деле есть три отдельных этапа, на которых производительность может быть оптимизирована: производительность загрузки (сколько времени требуется, чтобы я что-то увидел и сколько времени, пока я не могу взаимодействовать), производительность рендеринга (сколько времени требуется для отражения изменений), обратная запись. производительность (т. е. вызов API и проверка синхронизации данных). См. курс Google по производительности в ресурсах как хорошее введение.
  5. Подумайте о конвейере рендеринга, так как изменение DOM или CSS может привести к огромным усилиям по повторному рендерингу. Обычно такие фреймворки, как React или Vue, слишком тяжелы для вас, но вам нужно оставаться в рамках их шаблонов проектирования.
  6. Используйте вкладки «Производительность и сеть» в инструментах разработчика, чтобы узнать о узких местах производительности в вашем приложении.
  7. console.time('XYZ')и console.timeEnd('XYZ') для измерения времени, необходимого между двумя шагами

Основные выводы

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

Ресурсы

Chrome DevTools Google

Chrome Devtools keycdn

консольный объект Начало работы с Chrome Performance

Курс на перформанс