Vor kurzem hatte ich die Gelegenheit, eine neue Webanwendung zu erstellen, und überlegte, Angular auszuprobieren, um ein gutes Verständnis dafür zu erlangen. Also ja, ich binziemlich neu zu diesem Rahmen.

Nachdem ich die Nuancen des Frameworks verstanden hatte, fand ich es überraschend einfach, damit zu arbeiten. Alles an meiner Erfahrung war einfach großartig, bis Benutzer begannen, über die äußerst schleppende Leistung der Anwendung zu berichten.

Die Anwendung ist ziemlich einfach - sie hat zwei Bildschirme. Auf der einen Seite wird eine Liste mit Geschäftsinformationen angezeigt und auf der anderen Seite können Benutzer Geschäftsinformationen hinzufügen / bearbeiten. Diese zweite Seite ist ein einfaches Formular, auf dem der Benutzer Geschäftsinformationen eingeben muss. Es sieht aus wie das:

Die umrandeten Abschnitte werden mit gerendertng-repeat. Die Händlerliste umfasst rund 530 Einträge, die Markenliste rund 400 Einträge.

Nach ein wenig Profilerstellung stellte ich fest, dass der Besuch dieses zweiten Formularbildschirms den Speicherverbrauch des Browsers weiter erhöhen würde. Der erste Bildschirm hat keinen solchen Effekt. Ich habe einfach zwischen dem ersten und dem zweiten Bildschirm gewechselt und festgestellt, dass sich der Speicherverbrauch jedes Mal, wenn dieser Bildschirm geladen wird, um 50-75 MB erhöht. Irgendwann würde der Browser einfach einfrieren. So sieht das Speicherprofil aus:

Wie Sie sehen, steigt der Verbrauch weiter und es gibt keine Anzeichen für eine GC! Jeder Spitzenwert in der Knotenzahl und in der Speicherablaufverfolgung entspricht einem Besuch des zweiten formularbasierten Bildschirms.

Jetzt habe ich bereits eine ganze Reihe von Themen rund um den Winkel und den Speicherverbrauch geprüft, von denen jedoch jede erwähnt, dass die$scope Wenn eine neue Ansicht geladen wird, werden alle Ansichten entfernt. DasDOM-Knotenzahl auf sowas deutet mich sicher nicht an: /

Ich bin auch auf 2 wichtige Punkte im Zusammenhang mit der Verwendung von gestoßenng-repeat:

Vermeiden Sie den Aufruf von Funktionen innerhalb vonng-repeat Richtlinie.Verwenden Sie keine bidirektionale Bindungng-model innerhalb einesng-repeat Richtlinie.

Beides habe ich auf dem zweiten Bildschirm vermieden, und dennoch geht der Speicherverbrauch durch das Dach.

Meine Frage scheint zu seinnoch ein anderer Speicher bezogene Frage w.r.t eckig, aber ich habe wirklich versucht, eine Art von Abschluss zu bekommen und habe keine gefunden.

Ich würde mich über jede Unterstützung wirklich freuen, da meine Entscheidung, mit der Verwendung von Angular für den Rest des Portals fortzufahren, von der Lösung dieses Problems abhängt.

Danke fürs Lesen!

Update 1

Beyogen aufIlanLassen Sie mich hinzufügen, dass ich zwei Plugins verwende, um das Dropdown-Menü zu rendern und die Datumsauswahl zu implementieren.

Für das Dropdown verwende ichBootstrap-Auswahl und für die Datumsauswahl verwende ichBootstrap-Datepicker.

Damit bootstrap-select funktioniert, musste ich eine benutzerdefinierte Direktive schreiben, die eine Broadcast-Nachricht auf dem Server auslöste$last Veranstaltung vonng-repeat. Es sieht ungefähr so aus:

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

Dann verlasse ich mich im Controller auf dieses Ereignis, um das Rendering für das Dropdown-Plugin aufzurufen:

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

Für den Bootstrap-Datepicker muss ich nicht so aufwändig vorgehen, da ich das Datumseingabefeld nur mit JS umbrechen muss.

Update 2

Nach dem Ausschalten der Plugins reduziert sich der Speicherverbrauch drastisch. Das Problem eines Lecks besteht jedoch weiterhin. Früher, wenn die Formularansicht geladen wurde, erhöhte sich der Speicher um 50-60 MB. Nach dem Deaktivieren der Plugins nimmt die Größe um 25-35 MB zu. Wie Sie unten sehen können, steigt der Speicherverbrauch jedoch weiter an.