AngularJS
Profilowanie wydajności

Wszystko o profilowaniu

Co to jest profilowanie?

Z definicji profilowanie jest formą dynamicznej analizy programu, która mierzy na przykład przestrzeń (pamięć) lub złożoność czasową programu, użycie określonych instrukcji lub częstotliwość i czas trwania wywołań funkcji.

Dlaczego jest to konieczne?

Profilowanie jest ważne, ponieważ nie można skutecznie optymalizować, dopóki nie dowie się, co robi Twój program przez większość czasu. Bez pomiaru czasu wykonywania programu (profilowania) nie będziesz wiedział, czy rzeczywiście go poprawiłeś.

Narzędzia i techniki:

1. Wbudowane narzędzia programistyczne Chrome

   Obejmuje to kompleksowy zestaw narzędzi do profilowania. Możesz głęboko znaleźć wąskie gardła w pliku javascript, plikach css, animacjach, zużyciu procesora, przeciekach pamięci, sieci, bezpieczeństwie itp.

   Zrób nagranie na osi czasu i poszukaj podejrzanie długich zdarzeń oceny skryptu. Jeśli znajdziesz, możesz włączyć JS Profiler i ponownie wykonać nagranie, aby uzyskać bardziej szczegółowe informacje o tym, które funkcje JS zostały wywołane i jak długo trwały. Czytaj więcej...

2. FireBug (używać z Firefoksem)

3. Dynatrace (używać z IE)

4. Batarang (używać z Chrome)

   Jest to przestarzały dodatek do przeglądarki Chrome, choć jest stabilny i może być używany do monitorowania modeli, wydajności, zależności dla aplikacji kątowej. Działa dobrze w aplikacjach na małą skalę i pozwala uzyskać wgląd w to, co zmienna zasięgu ma na różnych poziomach. Informuje o aktywnych obserwatorach, wyrażeniach, kolekcjach w aplikacji.

5. Watcher (używać z Chrome)

   Przyjemny i uproszczony interfejs do zliczania obserwatorów w aplikacji Angular.

6. Użyj poniższego kodu, aby ręcznie sprawdzić liczbę obserwatorów w aplikacji kątowej (kredyt dla @Words Like Jared Liczba obserwatorów )

(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. Dostępnych jest kilka narzędzi / witryn internetowych, które umożliwiają szeroki zakres funkcji umożliwiających utworzenie profilu aplikacji.

   Jedną z takich witryn jest: https://www.webpagetest.org/

   Dzięki temu możesz uruchomić bezpłatny test prędkości witryny z wielu lokalizacji na całym świecie, używając prawdziwych przeglądarek (IE i Chrome) i przy rzeczywistych prędkościach połączeń konsumenckich. Możesz uruchamiać proste testy lub przeprowadzać zaawansowane testy, w tym transakcje wieloetapowe, przechwytywanie wideo, blokowanie treści i wiele więcej.

Następne kroki:

Gotowe z profilowaniem. To prowadzi tylko w połowie drogi. Kolejnym zadaniem jest przekształcenie wyników w elementy akcji w celu zoptymalizowania aplikacji. Zapoznaj się z tą dokumentacją, w jaki sposób możesz poprawić wydajność aplikacji kątowej za pomocą prostych sztuczek.

Happy Coding :)