AngularJS
Profilo delle prestazioni

Tutto sul profilo

Cos'è il profiling?

Per definizione, il profilo è una forma di analisi dinamica del programma che misura, ad esempio, lo spazio (memoria) o la complessità temporale di un programma, l'uso di particolari istruzioni, o la frequenza e la durata delle chiamate di funzione.

Perché è necessario?

La profilazione è importante perché non è possibile ottimizzare in modo efficace fino a quando non si sa che cosa sta facendo il proprio programma per la maggior parte del tempo. Senza misurare il tempo di esecuzione del programma (profilazione), non saprai se lo hai effettivamente migliorato.

Strumenti e tecniche:

1. Strumenti di sviluppo integrati di Chrome

   Questo include un set completo di strumenti da utilizzare per la profilazione. Puoi approfondire la ricerca di colli di bottiglia nel tuo file javascript, file css, animazioni, consumo di CPU, perdite di memoria, rete, sicurezza, ecc.

   Crea una registrazione della Timeline e cerca eventi di Evaluate Script lunghi e sospetti. Se ne trovi uno, puoi abilitare JS Profiler e rifare la registrazione per ottenere informazioni più dettagliate su esattamente quali funzioni JS sono state chiamate e per quanto tempo ciascuna ha preso. Leggi di più...

2. FireBug (usare con Firefox)

3. Dynatrace (utilizzare con IE)

4. Batarang (usare con Chrome)

   È un componente aggiuntivo obsoleto per il browser Chrome, anche se è stabile e può essere utilizzato per monitorare modelli, prestazioni, dipendenze per un'applicazione angolare. Funziona bene per applicazioni su piccola scala e può darti un'idea di cosa tiene la variabile scope a vari livelli. Ti parla di osservatori attivi, guarda le espressioni, guarda le raccolte nell'app.

5. Watcher (utilizzare con Chrome)

   Interfaccia utente piacevole e semplicistica per contare il numero di osservatori in un'app Angolare.

6. Usa il seguente codice per scoprire manualmente il numero di osservatori nella tua app angolare (credito a @Words Like Jared Number of watchers )

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

7. Sono disponibili diversi strumenti / siti Web online che facilitano un'ampia gamma di funzionalità per creare un profilo dell'applicazione.

   Uno di questi siti è: https://www.webpagetest.org/

   Con questo è possibile eseguire un test di velocità del sito Web gratuito da più località in tutto il mondo utilizzando i browser reali (IE e Chrome) e alla velocità di connessione reale del consumatore. È possibile eseguire semplici test o eseguire test avanzati tra cui transazioni multi-step, acquisizione video, blocco dei contenuti e molto altro.

Prossimi passi:

Fatto con il profilo. Ti porta solo a metà strada lungo la strada. Il prossimo compito è quello di trasformare i risultati in azioni per ottimizzare l'applicazione. Consulta questa documentazione su come migliorare le prestazioni della tua app angolare con semplici trucchi.

Happy Coding :)