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

Qual è un modo semplice per misurare la durata del ciclo di digest angularjs? Esistono vari metodi per analizzare le prestazioni del ciclo di digest, tuttavia ognuno di essi viene fornito con i suoi pitfals:

  • Chrome Profiler: troppi dettagli, non abbatte il ciclo di digest in un modo facile da trovare
  • 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?

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 ansible eseguire il debug e il profilo prima del Flame Chart. Ecco un esempio:

Flame Chart negli strumenti di sviluppo di Chrome

La seguente risposta ti indicherà le prestazioni inattive del ciclo $ digest, ovvero le prestazioni del digest quando nessuna delle tue espressioni di controllo 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 quanto segue nella console:

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

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


NOTA:

Domi ha notato nei commenti: angular.element(document) non produrrà molto se si è utilizzata la direttiva ng-app per l’inizializzazione. In tal caso, ottieni invece l’elemento ng-app . Ad esempio, facendo angular.element('#ng-app')

Puoi anche provare:

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

Ecco un nuovo strumento che ho trovato che aiuta nel profiling digest: Digest-HUD

inserisci la descrizione dell'immagine qui

Puoi anche usare prestazioni angolari

Questa estensione fornisce grafici di monitoraggio in tempo reale del numero di osservatori, del tempo di digerimento e della velocità di digestione. È anche ansible ottenere la distribuzione del timing del digest in modo da poter distinguere tempi di digestione eccezionalmente lunghi da più paterni ricorsivi 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 calcolare il tempo dei servizi e contare la loro esecuzione per determinare quelli che hanno un impatto maggiore sul tempo di esecuzione della tua app.

Schermata delle prestazioni angolari

Disclamer: sono l’autore dell’estensione

Uno strumento utile per tenere d’occhio il ciclo di digest può essere trovato tramite l’eccellente strumento ng-stats di @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.

buon ciclo di digestione inserisci la descrizione dell'immagine qui

Poca utilità per mostrare le statistiche sul digest / orologi angolari della tua pagina. Questa libreria ha attualmente un semplice script per produrre un grafico (vedi sotto). Crea anche un modulo chiamato angularStats che ha una direttiva chiamata angularStats angular-stats che può essere usata per mettere statistiche angolari su un posto specifico nella pagina che si specifica.

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

Puoi usare UX Profiler

  • Visualizzazione della Transazione Utente, cioè CLICCA e tutte le attività da essa causate (altri eventi, XHR, Timeout) raggruppate insieme.
  • Misurazioni del tempo (come l’utente lo percepisce) dell’intera Transazione utente e / o delle sue parti.
  • Traccia stack asincrona combinata.
  • Focused Profiler – profilo solo l’evento problematico.
  • Integrazione 1.x angular.

inserisci la descrizione dell'immagine qui

per la modalità rigorosa, una corsa di digest cucle, eseguila nella console f12 in chrome

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

gli strumenti sopra descritti ti hanno già dato l’idea di misurare le prestazioni del ciclo digest. La maggior parte dei punti importanti per aumentare le prestazioni del ciclo digest sono

  • Monitorare attentamente scorrere gli eventi per hide tutti gli elementi invisibili e
    ridurre notevolmente il numero di osservatori.

  • Sono gestibili i cicli $ digest per tutti gli altri eventi.