AngularJS
Prestationsprofilering

Allt om profilering

Vad är profilering?

Per definition är profilering en form av dynamisk programanalys som mäter t.ex. ett programs rymd (minne) eller tidskomplexitet, användningen av särskilda instruktioner eller frekvensen och varaktigheten för funktionssamtal.

Varför är det nödvändigt?

Profilering är viktigt eftersom du inte kan optimera effektivt förrän du vet vad ditt program spenderar mest av sin tid på att göra. Utan att mäta programmets körningstid (profilering) vet du inte om du faktiskt har förbättrat den.

Verktyg och tekniker:

1. Chrome inbyggda dev-verktyg

   Detta inkluderar en omfattande uppsättning verktyg som kan användas för profilering. Du kan gå djup för att ta reda på flaskhalsar i din javascript-fil, css-filer, animationer, CPU-konsumtion, minnesläckor, nätverk, säkerhet etc.

   Gör en tidslinje inspelning och leta efter misstänkt länge Utvärdera Script händelser. Om du hittar några kan du aktivera JS Profiler och göra din inspelning igen för att få mer detaljerad information om exakt vilka JS-funktioner som anropades och hur lång tid det tog. Läs mer...

2. FireBug (använd med Firefox)

3. Dynatrace (använd med IE)

4. Batarang (använd med Chrome)

   Det är ett föråldrat tillägg för krom-webbläsare, men det är stabilt och kan användas för att övervaka modeller, prestanda, beroenden för en vinkelapplikation. Det fungerar bra för småskaliga applikationer och kan ge dig en inblick i vad som omfattar variabeln på olika nivåer. Den berättar om aktiva tittare, klockuttryck, klocksamlingar i appen.

5. Watcher (användning med Chrome)

   Trevligt och förenklat användargränssnitt för att räkna antalet tittare i en vinkelapp.

6. Använd följande kod för att manuellt ta reda på antalet tittare i din vinklade app (kredit till @Words Like Jared Antal tittare )

(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. Det finns flera onlineverktyg / webbplatser tillgängliga som underlättar ett brett utbud av funktioner för att skapa en profil för din applikation.

   En sådan webbplats är: https://www.webpagetest.org/

   Med detta kan du köra ett gratis webbplatshastighetstest från flera platser runt om i världen med riktiga webbläsare (IE och Chrome) och med verkliga konsumentanslutningshastigheter. Du kan köra enkla tester eller utföra avancerade tester inklusive transaktioner i flera steg, videoinspelning, innehållsblockering och mycket mer.

Nästa steg:

Klar med profilering. Det ger dig bara halvvägs på vägen. Nästa uppgift är att faktiskt förvandla dina resultat till handlingar för att optimera din ansökan. Se den här dokumentationen om hur du kan förbättra prestanda för din kantiga app med enkla knep.

Happy Coding :)