AngularJS
Profilage de performance

Tout sur le profilage

Qu'est-ce que le profilage?

Par définition, le profilage est une forme d'analyse de programme dynamique qui mesure, par exemple, l'espace (mémoire) ou la complexité temporelle d'un programme, l'utilisation d'instructions particulières ou la fréquence et la durée des appels de fonction.

Pourquoi est-ce nécessaire?

Le profilage est important car vous ne pouvez pas optimiser efficacement tant que vous ne savez pas ce que votre programme passe le plus de temps à faire. Sans mesurer le temps d'exécution de votre programme (profilage), vous ne saurez pas si vous l'avez réellement amélioré.

Outils et techniques:

1. Outils de développement intégrés à Chrome

   Cela inclut un ensemble complet d’outils à utiliser pour le profilage. Vous pouvez aller plus loin pour trouver des goulots d’étranglement dans votre fichier javascript, vos fichiers CSS, vos animations, votre consommation de processeur, les fuites de mémoire, le réseau, la sécurité, etc.

   Effectuez un enregistrement sur la timeline et recherchez les événements d'évaluation du script d'une durée anormalement longue. Si vous en trouvez, vous pouvez activer JS Profiler et refaire votre enregistrement pour obtenir des informations plus détaillées sur les fonctions JS qui ont été appelées et leur durée. Lire la suite...

2. FireBug (utilisation avec Firefox)

3. Dynatrace (utiliser avec IE)

4. Batarang (utiliser avec Chrome)

   C'est un add-on obsolète pour le navigateur Chrome, même s'il est stable et peut être utilisé pour surveiller les modèles, les performances, les dépendances pour une application angulaire. Cela fonctionne très bien pour les applications à petite échelle et peut vous donner un aperçu de ce que la variable de portée retient à différents niveaux. Il vous informe sur les observateurs actifs, les expressions de surveillance et les collections de montres dans l'application.

5. Watcher (utiliser avec Chrome)

   Interface utilisateur agréable et simpliste pour compter le nombre d'observateurs dans une application angulaire.

6. Utilisez le code suivant pour rechercher manuellement le nombre d'observateurs dans votre application angulaire (crédit à @Words Like Jared Nombre d'observateurs )

(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. Plusieurs outils / sites Web en ligne sont disponibles pour faciliter un large éventail de fonctionnalités afin de créer un profil de votre application.

   Un de ces sites est: https://www.webpagetest.org/

   Avec cela, vous pouvez exécuter un test de vitesse de site Web gratuit à partir de plusieurs endroits dans le monde en utilisant de vrais navigateurs (IE et Chrome) et à des vitesses de connexion réelles. Vous pouvez exécuter des tests simples ou effectuer des tests avancés, notamment des transactions en plusieurs étapes, la capture vidéo, le blocage de contenu et bien plus encore.

Prochaines étapes:

Fait avec profilage. Il ne vous amène qu'à mi-chemin. La tâche suivante consiste à transformer vos résultats en éléments d'action pour optimiser votre application. Consultez cette documentation pour savoir comment améliorer les performances de votre application angulaire avec des astuces simples.

Bonne codage :)