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

Каков простой способ измерить продолжительность цикла дайджеста angularjs? Существуют различные методы анализа производительности цикла дайджеста, но каждый имеет свои собственные ловушки:

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

... должен быть способ получше?! 1?

Вот секрет. В инструментах Chrome dev выполните запуск профиля процессора. После того, как вы остановили захват, внизу экрана появится треугольник вниз рядом с надписью «Heavy (Bottom Up)». Щелкните треугольник и выберите «Таблица пламени». Находясь в режиме Flame Chart, вы можете масштабировать и панорамировать, чтобы увидеть циклы дайджеста, сколько времени они занимают и какие именно функции вызываются. Таблица Flame невероятно полезна для отслеживания проблем с загрузкой страниц, проблем с производительностью ng-repeat, проблем цикла дайджеста! Я действительно не знаю, как я смог отлаживать и профилировать до Flame Chart. Вот пример:

Следующий ответ расскажет вам о производительности цикла $ digest в режиме ожидания , т. Е. О производительности дайджеста, когда ни одно из ваших контрольных выражений не изменится. Это полезно, если ваше приложение кажется вялым, даже если представление не меняется. Для более сложных ситуаций см. Ответ aet.

Введите в консоль следующее:

angular.element(document).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Результат даст вам продолжительность цикла дайджеста в миллисекундах. Чем меньше число, тем лучше.

ЗАМЕТКА:

Доми отметил в комментариях: angular.element(document) мало что даст, если использовать ng-appдирективу для инициализации. В этом случае ng-appвместо этого возьмите элемент. Например, делаяangular.element('#ng-app')

Вы также можете попробовать:

angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) { 
  var a = performance.now(); 
  $rootScope.$apply(); 
  console.log(performance.now()-a); 
})

Я нашел новый инструмент, который помогает при профилировании дайджеста: Digest-HUD

Вы также можете использовать angular-performance

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

Заявление об отказе: я являюсь автором расширения

Один удобный инструмент для отслеживания цикла дайджеста можно найти с помощью отличного инструмента ng-stats от @kentcdodds . Он создает такой небольшой визуальный элемент, который может быть реализован даже через букмарклет. Его даже можно использовать внутри iFrames, например jsfiddle.

Маленькая утилита для отображения статистики об угловом дайджесте / часах вашей страницы. В настоящее время в этой библиотеке есть простой скрипт для создания диаграммы (см. Ниже). Он также создает модуль с именем, у angularStatsкоторого есть директива, angular-stats которая может использоваться для размещения статистики angular в определенном месте на указанной вами странице.

Найдено на https://github.com/kentcdodds/ng-stats

Вы можете использовать UX Profiler

• Просмотр транзакций пользователя, то есть CLICK и все вызванные им действия (другие события, XHR, таймауты) сгруппированы вместе.
• Измерения времени (по ощущениям Пользователя) всей Пользовательской транзакции и / или ее частей.
• Комбинированная асинхронная трассировка стека.
• Focused Profiler - профилируйте только проблемное событие.
• Интеграция Angular 1.x.

для строгого режима, один запуск дайджеста cucle, запустите его в консоли f12 в chrome

angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])

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

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

• Иметь управляемые циклы дайджеста для всех остальных событий.