Niedawno miałem okazję zbudować nową aplikację internetową i pomyślałem o wypróbowaniu Angulara, aby dobrze ją zrozumieć. Więc tak, jestemstosunkowo nowy do tych ram.

Po zrozumieniu niuansów ram okazało się zaskakująco łatwe w obsłudze. Wszystko o moim doświadczeniu było wspaniałe, dopóki użytkownicy nie zaczęli zgłaszać całkowicie opóźnionej wydajności aplikacji.

Aplikacja jest dość prosta - ma 2 ekrany. Jedna z nich zawiera listę ofert, a druga, w której użytkownicy mogą dodawać / edytować informacje o transakcjach - ta druga strona jest prostą formą oczekującą od użytkownika wprowadzenia informacji związanych z transakcją. To wygląda tak:

Przedstawione sekcje są renderowane przy użyciung-repeat. Lista sprzedawców detalicznych zawiera około 530 wpisów, podczas gdy lista marek ma około 400 wpisów.

Po odrobinie profilowania doszedłem do wniosku, że odwiedzanie tego drugiego ekranu formularza będzie zwiększać zużycie pamięci przez przeglądarkę. Pierwszy ekran nie ma takiego efektu. Po prostu przełączałem się między pierwszym ekranem a drugim ekranem formularza i stwierdziłem, że za każdym razem, gdy ten ekran zostanie załadowany, zużycie pamięci zwiększy się o 50-75 MB. Ostatecznie przeglądarka po prostu zamarznie. Oto jak wygląda profil pamięci:

Jak widać, konsumpcja ciągle rośnie, i nie ma śladu żadnej GC! Każdy skok w liczbie węzłów i śladzie pamięci odpowiada wizycie na drugim ekranie opartym na formularzu.

Teraz sprawdziłem już wiele problemów związanych z konsumpcją kątową i pamięciową, ale każdy z nich wspomina, że$scope dla każdego z widoków zostanie usunięty po załadowaniu nowego widoku. TheLiczba węzłów DOM na pewno nie oznacza dla mnie czegoś takiego: /

Natknąłem się także na 2 ważne punkty związane z użytkowaniemng-repeat:

Unikaj wywoływania jakiejkolwiek funkcji wng-repeat dyrektywa.Nie korzystaj z dwukierunkowego wiązaniang-model w granicachng-repeat dyrektywa.

Oba te elementy uniknąłem na drugim ekranie, a jednak zużycie pamięci przechodzi przez dach.

Moje pytanie może się wydawaćjeszcze inny pytanie związane z pamięcią w.r.t kątowe, ale naprawdę próbowałem uzyskać jakieś zamknięcie tego i nie znalazłem żadnego.

Naprawdę byłbym wdzięczny za wszelką pomoc w tym zakresie, ponieważ moja decyzja o postępie z wykorzystaniem kanciastego dla reszty portalu zależy od rozwiązania tego problemu.

Dziękuje za przeczytanie!

Aktualizacja 1

Oparte naIlanproponuję dodać, że używam 2 wtyczek do renderowania listy rozwijanej i implementacji selektora daty.

Na listę rozwijaną używamBootstrap-select i dla selektora dat używamBootstrap-datepicker.

Aby wybrać bootstrap do pracy, musiałem napisać dyrektywę niestandardową, która uruchomiła transmisję na$last wydarzenieng-repeat. Wygląda to mniej więcej tak:

.directive('onFinishRender', function($timeout) {
    return {
        restrict : 'A',
            link : function(scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit('ngRepeatFinished');
                     });
                 }
            }
      };
});

Następnie w kontrolerze polegam na tym zdarzeniu, aby wywołać render dla wtyczki rozwijanej:

    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        $('#retailer').selectpicker('render');
    });

W przypadku bootstrap-datepicker nie muszę robić tak skomplikowanej rzeczy, ponieważ wystarczy zawinąć pole wprowadzania daty za pomocą JS.

Aktualizacja 2

Po wyłączeniu wtyczek zużycie pamięci drastycznie spada. Jednak problem wycieku nadal występuje. Wcześniej, gdy widok formularza był ładowany, pamięć zwiększałaby się o 50-60 MB. Po wyłączeniu wtyczek skacze o 25-35 MB. Ale jak widać poniżej, zużycie pamięci stale rośnie.