AngularJS
Prestatieprofilering

Alles over profilering

Wat is profilering?

Profilering is per definitie een vorm van dynamische programma-analyse die bijvoorbeeld de ruimte (geheugen) of tijdcomplexiteit van een programma, het gebruik van bepaalde instructies of de frequentie en duur van functieaanroepen meet.

Waarom is het nodig?

Profilering is belangrijk omdat u pas effectief kunt optimaliseren als u weet waar uw programma het meeste tijd aan besteedt. Zonder de uitvoeringstijd van uw programma (profilering) te meten, weet u niet of u het daadwerkelijk hebt verbeterd.

Hulpmiddelen en technieken:

1. Ingebouwde dev-hulpprogramma's van Chrome

   Dit omvat een uitgebreide set hulpmiddelen die kunnen worden gebruikt voor profilering. U kunt diep gaan om knelpunten te achterhalen in uw javascript-bestand, css-bestanden, animaties, cpu-verbruik, geheugenlekken, netwerk, beveiliging, enz.

   Maak een tijdbalk opname en op zoek naar verdacht lang Evalueer Script evenementen. Als u er een vindt, kunt u de JS Profiler inschakelen en uw opname opnieuw uitvoeren om meer gedetailleerde informatie te krijgen over precies welke JS-functies werden genoemd en hoe lang elk duurde. Lees verder...

2. FireBug (gebruik met Firefox)

3. Dynatrace (gebruik met IE)

4. Batarang (gebruik met Chrome)

   Het is een verouderde add-on voor Chrome-browser, hoewel het stabiel is en kan worden gebruikt om modellen, prestaties en afhankelijkheden voor een hoekapplicatie te controleren. Het werkt prima voor kleinschalige toepassing en kan u een inzicht geven in wat reikwijdte variabele op verschillende niveaus heeft. Het vertelt je over actieve kijkers, kijkuitdrukkingen, kijkcollecties in de app.

5. Watcher (gebruik met Chrome)

   Leuke en simplistische gebruikersinterface om het aantal kijkers in een Angular-app te tellen.

6. Gebruik de volgende code om handmatig het aantal kijkers in uw hoekapp te achterhalen (met dank aan @Words Like Jared Aantal kijkers )

(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. Er zijn verschillende online tools / websites beschikbaar die een breed scala aan functionaliteiten mogelijk maken om een profiel van uw applicatie te maken.

   Een dergelijke site is: https://www.webpagetest.org/

   Hiermee kunt u een gratis website-snelheidstest uitvoeren vanaf meerdere locaties over de hele wereld met behulp van echte browsers (IE en Chrome) en met echte consumentenverbindingssnelheden. U kunt eenvoudige tests uitvoeren of geavanceerde tests uitvoeren, waaronder transacties in meerdere stappen, video-opname, inhoud blokkeren en nog veel meer.

Volgende stappen:

Klaar met profilering. Het brengt je slechts halverwege de weg. De volgende taak is om uw bevindingen daadwerkelijk om te zetten in actie-items om uw toepassing te optimaliseren. Bekijk deze documentatie over hoe u de prestaties van uw hoekige app kunt verbeteren met eenvoudige trucs.

Happy Coding :)