Что такое простой способ измерения продолжительности цикла digularjs digest? Существуют различные методы анализа производительности цикла дайджеста, однако каждый из них имеет свои собственные погрешности:
... должен быть лучший способ?! 1?
Вот секрет. В инструментах chrome dev выполните прогон профиля cpu. После того, как вы остановили захват, внизу экрана находится треугольник вниз рядом с "Heavy (Bottom Up)". Нажмите треугольник и выберите "Пламя диаграммы". Когда вы находитесь в режиме пламенной графики, вы можете масштабировать и панорамировать, чтобы увидеть циклы дайджеста, сколько времени они берут и точно какие функции вызывают. Пламенная диаграмма настолько невероятно полезна для отслеживания проблем с загрузкой страницы, проблем с ошибками ng-repeat, проблем с циклами дайджеста! Я действительно не знаю, как мне удалось отладить и профилировать перед пламенной таблицей. Вот пример:
В следующем ответе будет указано idle производительность цикла $digest, т.е. производительность дайджеста, когда ни одно из ваших выражений часов не изменится. Это полезно, если ваше приложение кажется вялым, даже если представление не меняется. Для более сложных ситуаций см. Ответ aet.
Введите в консоль следующее:
angular.element(document).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
Результат даст вам продолжительность цикла дайджеста в миллисекундах. Чем меньше число, тем лучше.
Примечание:
Domi отметил в комментариях:
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
Это расширение предоставляет диаграммы мониторинга в реальном времени количества наблюдателей, времени переваривания и скорости переваривания. Вы также получаете дайджест распределение времени, так что вы можете сделать исключительно длинный дайджест время от более рекурсивных отцов и все данные в реальном времени связаны с событий, чтобы вы могли определить, какие действия изменили приложение выступления. Наконец, вы можете использовать метод времени и подсчитать их чтобы определить те, которые оказывают большее влияние на время работы вашего приложения.
Disclamer: Я являюсь автором расширения
Один удобный инструмент для наблюдения за циклом дайджеста можно найти через отличный инструмент ng-stats @kentcdodds. Он создает небольшой визуальный элемент, подобный этому, и может быть даже реализован через букмарклет. Его можно даже использовать внутри iFrames, например jsfiddle.
Небольшая утилита для отображения статистики о вашей странице angular digest/watches. Эта библиотека в настоящее время имеет простой script для создать диаграмму (см. ниже). Он также создает модуль под названием
angularStats, который имеет директиву под названиемangular-statsкоторый можно использовать для размещения статистики angular в определенном месте на указанной странице.
Найдено на https://github.com/kentcdodds/ng-stats
Вы можете использовать UX Profiler
описанные выше инструменты уже дали вам представление об измерении производительности цикла дайджеста Большинство факторов, влияющих на повышение производительности цикла дайджест, составляют
Следить за темой прокрутки событий, чтобы скрыть все невидимые элементы и
значительно уменьшить количество наблюдателей.
Имеют управляемые циклы дайджеста $для всех других событий.
для строгого режима, один запуск дайджест-cucle, запуск его в консоли f12 в chrome
angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])