Come misuro le prestazioni del ciclo di digest dell'app della mia AngularJS?

Question

Qual è un modo semplice per misurare la durata del ciclo di digest angularjs? Esistono vari metodi per analizzare le prestazioni del ciclo digest, ma ciascuno dotato di propri pitfals:

• Chrome Profiler: troppi dettagli, non abbattere il ciclo digest in un facile da trovare modo
• Batarang (plug-in del browser AngularJS): troppo sovraccarico, bassa frequenza di aggiornamento, esplode con app di grandi dimensioni.

... ci deve essere un modo migliore?! 1?

Answer 1

Ecco un segreto. Negli strumenti di chrome dev, eseguire un profilo cpu. Dopo aver interrotto l'acquisizione, nella parte inferiore dello schermo si trova un triangolo in basso accanto a "Pesante (dal basso verso l'alto)". Fare clic sul triangolo e selezionare "Flame Chart". Una volta che sei in modalità Flame Chart, puoi ingrandire e fare una panoramica per vedere i cicli digest, quanto tempo impiegano e esattamente quali funzioni vengono chiamate. Il Flame Chart è così incredibilmente utile per rintracciare i problemi di caricamento della pagina, problemi di prestazioni ng-repeat, problemi del ciclo digest! Non so davvero come sia stato possibile eseguire il debug e il profilo prima del Flame Chart. Ecco un esempio:

Answer 2

La seguente risposta indicherà la prestazione inattiva del ciclo $ digest, ad esempio, le prestazioni del digest quando nessuna delle espressioni di visualizzazione cambia. Questo è utile se la tua applicazione sembra lenta anche quando la vista non cambia. Per situazioni più complesse, vedere la risposta di Aet.

---

Digitare il seguente nella console:

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

Il risultato vi darà la durata del ciclo di digest, in millisecondi. Più piccolo è il numero, meglio è.

---

NOTA:

Domi notato nei commenti: angular.element(document) non si produrrà più se è stato utilizzato la direttiva ng-app per l'inizializzazione. In tal caso, prendi invece l'elemento ng-app. Per esempio. facendo angular.element('#ng-app')

Potete anche provare:

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

Answer 3

Qui è un nuovo strumento che ho scoperto che aiuta a digerire profiling: Digest-HUD

Answer 4

Si potrebbe anche usare angular-performance

Questo estensione fornisce grafici di monitoraggio in tempo reale del numero di osservatori , tempo di digestione g e tasso di digestione.È inoltre possibile ottenere la distribuzione del tempo di digitazione in modo che sia possibile distinguere i tempi più lunghi da digerire ricorsivo e tutti i dati in tempo reale sono collegati agli eventi in modo da poter determinare quali azioni hanno modificato le prestazioni dell'applicazione . Infine, puoi utilizzare il metodo dei servizi orari e contare la loro esecuzione per determinare quelli che hanno un impatto maggiore sul tempo di esecuzione della tua app.

Disclamer: Io sono l'autore dell'estensione

Answer 5

È possibile utilizzare UX Profiler

• User vista transazione, cioè CLICCA e tutta l'attività causate da esso (altri eventi , XHRs, Timeouts) raggruppati insieme.
• Misurazioni del tempo (come l'utente lo ritiene) dell'intera transazione utente e/o delle sue parti.
• Traccia stack asincrona combinata.
• Focused Profiler - profilo solo l'evento problematico.
• Integrazione 1.x angolare.

Answer 6

gli strumenti sopra descrivono già ti ha dato l'idea di misurare le prestazioni della digerire anello La maggior parte dei punti 'importanti per aumentare le prestazioni di digerire ciclo sono

• Monitor strettamente scorrere gli eventi per nascondere tutti gli elementi invisibili e
  ridurre notevolmente il numero di osservatori.

• Sono gestibili cicli di digestione $ per tutti gli altri eventi.

Answer 7

per la modalità rigorosa, una gestione di digerire cucle, eseguirlo in console F12 in cromo

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

Answer 8

Uno strumento utile per tenere d'occhio il ciclo digest possono essere trovati tramite l'eccellente ng-stats tool da @kentcdodds. Crea un piccolo elemento visivo in questo modo e può anche essere implementato tramite bookmarklet. Può anche essere usato all'interno di iFrame come jsfiddle.

piccola utility per mostrare statistiche circa della tua pagina angolari digest/orologi. Questa libreria ha attualmente un semplice script per produrre un grafico (vedi sotto). Crea anche un modulo chiamato angularStats che ha una direttiva denominata angular-stats che può essere utilizzata per inserire statistiche angolari in un punto specifico della pagina specificata.

Trovato in https://github.com/kentcdodds/ng-stats