Як мені виміряти ефективність дайджест-циклу моєї програми AngularJS?

Який простий спосіб виміряти тривалість циклу перебору angularjs? Існують різні методи аналізу результатів циклу перетравлення, однак кожен має свої власні помилки:

• Chrome Profiler: Забагато деталей, не розбиває цикл дайджесту так легко
• Batarang (плагін браузера AngularJS): Забагато накладних витрат, повільна частота оновлення, вибухає з великими програмами.

... повинен бути кращий спосіб?! 1?

Ось секрет. В інструментах chrome dev виконайте запуск профілю процесора. Після того, як ви зупинили зйомку, внизу екрана знаходиться трикутник вниз поруч із написом "Важкий (знизу вгору)". Клацніть трикутником і виберіть "Диаграма полум'я". Після того, як ви перейдете в режим діаграми полум'я, ви зможете масштабувати та панорамувати, щоб побачити дайджест-цикли, скільки часу вони займають і які саме функції викликаються. Діаграма полум’я надзвичайно корисна для відстеження проблем із завантаженням сторінок, проблем продуктивності ng-repeat, проблем циклу перетравлення! Я насправді не знаю, як мені вдалося налагодити та створити профіль до діаграми полум'я. Ось приклад:

Наступна відповідь повідомить вам про бездіяльність циклу $ 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

Ви також можете використовувати кутову продуктивність

Це розширення надає графіки моніторингу в реальному часі кількості спостерігачів, термінів дайджесту та швидкості дайджесту. Ви також отримуєте дайджест розподілу часу, щоб ви могли розібрати надзвичайно довгий час дайджесту з більш рекурсивних шаблонів, а всі дані в реальному часі пов'язані з подіями, щоб ви могли визначити, які дії змінили ефективність програми. Нарешті, ви можете визначити час службових методів та підрахувати їх виконання, щоб визначити ті, які мають більший вплив на час роботи вашого додатка.

Відмова: Я автор розширення

Один зручний інструмент для стеження за циклом дайджесту можна знайти за допомогою чудового інструменту ng-stats від @kentcdodds . Він створює невеликий візуальний елемент, подібний до цього, і навіть може бути реалізований за допомогою закладки. Його навіть можна використовувати всередині iFrames, наприклад jsfiddle.

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

Знайдено за адресою https://github.com/kentcdodds/ng-stats

Ви можете використовувати UX Profiler

• Представлення користувацьких транзакцій, тобто КЛІК, та всі дії, спричинені цим (інші події, XHR, тайм-аути), згруповані разом.
• Вимірювання часу (як це відчуває Користувач) усієї транзакції користувача та / або її частин.
• Комбінована асинхронна трасування стека.
• Фокусований Профайлер - профіль лише проблемної події.
• Кутова інтеграція 1.x.

для строгого режиму, один запуск дайджест-кукла, запустіть його в консолі f12 в хромі

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

інструменти, описані вище, вже дали вам ідею вимірювання продуктивності циклу дайджесту.

• Ретельно стежте за подіями прокрутки, щоб приховати всі невидимі елементи та
  значно зменшити кількість спостерігачів.

• Майте керовані $ дайджест цикли для всіх інших подій.