Проблемы с производительностью усугубляются. 😠

Так же отягчающе, как оказаться втиснутым в кресло самолета с битым стеклом в нижнем белье.

И тем более, когда вы не знаете, что их вызывает.

…

Так как же профилировать приложение Angular и выяснить, что вызывает низкую производительность во время выполнения?

С чего вообще начать?

И как только вы обнаружите проблему с производительностью, как вы ее исправите?

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

Итак, где мы начнем копать? ⛏ ⛏ ⛏

Что вызывает проблемы с производительностью Angular во время выполнения?

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

Я видел приложения Angular с проблемами производительности во время выполнения, вызванными сторонними библиотеками, импортированными в приложение Angular. Когда поток JavaScript перегружен фоновой обработкой, неправильными HTTP-запросами, неправильными запросами Firebase и множеством других плохо настроенных задач, ваше приложение Angular не может реагировать. И эти типы проблем с производительностью только кричат ​​громче, когда ваше приложение Angular используется на мобильных устройствах с ограниченной вычислительной мощностью и плохим подключением.

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

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

Включение и использование инструментов отладки Angular для профилирования производительности обнаружения изменений

Распространенной слабостью Angular во время выполнения является механизм обнаружения изменений, который используется для привязки данных между вашим файлом шаблона и вашим кодом.

Слабость? Ну… может быть, это больше похоже на крутую функцию, которой слишком многие из нас умеют злоупотреблять. 🤓

Так как же профилировать механизм обнаружения изменений Angular, чтобы выяснить, не является ли он причиной проблем с производительностью во время выполнения?

Первый шаг — открыть файл main.ts и включить встроенные инструменты отладки Angular.

import { ApplicationRef, enableProdMode } from '@angular/core';
import { enableDebugTools } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(moduleRef => {
    const applicationRef = moduleRef.injector.get(ApplicationRef);
    const componentRef = applicationRef.components[0];
    enableDebugTools(componentRef);
  })
  .catch(err => console.error(err));

Далее мы запустим наше приложение Angular с помощью команды serve.

ng serve --open

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

ng.profiler.timeChangeDetection()

Но что именно делает эта функция?

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

Если вы подозреваете, что определенная страница в вашем приложении Angular вызывает перегрузку обнаружения изменений, то это быстрый и грязный способ профилирования обнаружения изменений.

Но что, если вам нужен более продвинутый мониторинг обнаружения изменений?

Или даже лучший способ профилировать производительность вашего приложения Angular во время выполнения?

Вот где действительно сияет расширение Angular DevTools.

Как профилировать ваше приложение Angular с помощью расширения Angular DevTools

Знаете ли вы, что у фреймворка Angular есть собственные расширения?

Он был создан для браузера Chrome и добавляет специальные возможности отладки и профилирования Angular. Это действительно классный инструмент, который выручил меня из многих проблем.

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

После установки откройте инструменты разработчика, и вы должны увидеть новую вкладку под названием Angular. Если вы его не видите, нажмите на 3 точки справа, затем нажмите «Дополнительные инструменты», и вы должны увидеть его в этом списке.

Есть два инструмента, которые вы можете использовать.

  • Компоненты (используется для просмотра визуализируемой структуры ваших компонентов Angular).
  • Профилировщик (используется для профилирования обнаружения изменений Angular).

Нас интересует второй инструмент.

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

Пока он профилирует производительность вашего приложения, вам нужно щелкать в тех местах, где ваше приложение Angular работает медленно.

После этого нажмите кнопку «Стоп», и вы должны увидеть график, подобный приведенному ниже.

Каждая полоса на графике представляет собой цикл обнаружения изменений.

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

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

Использование инструментов профилирования производительности Chrome

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

…барабанная дробь, пожалуйста…

🥁 🥁 🥁

…

🥁 🥁 🥁

…и…

…Добро пожаловать в…

Мощный Chrome Profiler — инструмент, который я люблю и презираю.

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

Первый шаг — загрузить приложение Angular в браузере Chrome. И затем будьте готовы вызвать проблему с производительностью, с которой вы столкнулись.

Затем вам нужно открыть инструменты разработчика Chrome и выбрать вкладку Производительность.

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

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

Когда вы закончите, нажмите кнопку Стоп, и вам будут показаны различные диаграммы, показывающие, как работает ваше приложение.

Объяснение различных диаграмм и того, как их читать, выходит за рамки этой статьи. Кроме того, Минко создал отличное видео, в котором подробно рассказывается об инструменте Производительность, графиках пламени и т. д. (см. ниже).

Тем не менее, вот несколько указателей.

  • При профилировании приложения Angular с помощью инструмента производительности Chrome вам нужно искать любые красные полосы в верхней части графика.
  • Нажмите на них, чтобы узнать, как долго задача снижала производительность вашего приложения.
  • Вы также можете детализировать различные вызовы функций и т. д. на основном графике.
  • При просмотре функции или задачи следите за вкладкой «Сводка» в нижней части браузера, чтобы узнать, содержит ли она дополнительную информацию об инициаторе.

Графики производительности будут сильно различаться, поэтому вам может быть интересно, как ведут себя другие приложения Angular и какие диаграммы производительности они генерируют?

Что ж, вот снимок хорошо работающего приложения Angular.

И снимок того, который плохо себя вел из-за сторонней библиотеки.

Какой инструмент мне следует использовать для профилирования моего приложения Angular?

Лично я считаю расширение Angular Devtools довольно крутым инструментом, который всегда под рукой.

Это первый инструмент, который я беру, когда мне нужно разобраться с проблемами производительности Angular.

Помимо этого, инструменты профилирования Chrome удобны для более глубокого изучения.

Какой инструмент вам нравится использовать? И почему тебе это нравится?

Позвольте мне знать в комментариях ниже.

И если вы нашли эту статью полезной, нажмите кнопку 👏 👏 👏! 💥

Подпишитесь на меня: GitHub, Medium, Личный блог

Первоначально опубликовано на https://danielk.tech.