Heute musste ich ein Leistungsproblem beheben, das durch diesen Code verursacht wurde: Achten Sie auf updateStats, die in der Vorlage aufgerufen werden
%Vor%Vorlage verwenden:
%Vor%Nach dem Debuggen dieses Codes entdeckte ich, dass diese Funktion viel mehr Zeit als die Array-Größe aufgerufen wurde (mein Array hat 4 Objekte und die Funktion wurde mehr als 100 Mal aufgerufen), sogar Maus-Hover nannte diese Funktion. Ich habe das behoben, indem ich einfach ein ng-init in die Vorlage eingefügt habe und jetzt funktioniert es richtig, aber ich habe nicht herausgefunden, warum diese Funktion so oft aufgerufen wurde. Gibt es etwas über die Zwei-Wege-Datenbindung?
Dies geschieht nicht wegen der Zwei-Wege-Datenbindung (es ist anwendbar auf Formulareingaben), sondern eher wegen der Winkeländerungserkennung. Angular überprüft regelmäßig, ob einer der Werte, die an eine Vorlage gebunden sind, geändert wurde, und wenn dies der Fall ist, wird der Wert in der Ansicht aktualisiert. In der Regel wird es durch benutzergenerierte Ereignisse ausgelöst. Um zu überprüfen, ob sich der Wert von updateStats(entityNode) geändert hat, wertet Angular es aus, was den Leistungseinbruch verursacht.
Um dies zu beheben, können Sie die zuvor erwähnte einmalige Bindung updateStats(entityNode) verwenden, wenn das Ergebnis einmal festgelegt ist und sich in Zukunft nicht ändern wird . Ich denke, das ist dein Fall, und du hast die Bewertung bereits nach ng-init verschoben. Für Werte, die mit der Zeit aktualisiert werden, wäre es besser, eine separate Eigenschaft in entityNode wie entityNode.stats zu erstellen, sie in der Vorlage anzuzeigen und die updateStats(entityNode) in Ihrem Controller oder Dienst nur bei Bedarf auszuführen. Auf diese Weise verhindern Sie, dass updateStats(entityNode) bei jedem Digest-Zyklus ausgeführt wird (Sie haben bereits gesehen, wie oft dies der Fall ist) und verbessern dadurch die Leistung Ihrer App.
Normalerweise wird empfohlen, für solche Szenarien $watch zu verwenden. Da Sie eine Funktion {{updateStats()}} binden, wird sie bei jedem Digest-Zyklus ausgeführt.
In Ihrem Code wird also immer, wenn ein Digest-Zyklus aufgerufen wird, auch die Funktion aufgerufen. Und Digest-Zyklen werden häufig intern in Angular genannt.
Was Sie sehen, ist das Ergebnis eines Digest-Zyklus.
Durch das Hinzufügen von :: wird die Funktion einmalige / einmalige Bindung aufgerufen.
{{ ::updateStats(entityNode) }}
Tags und Links javascript angularjs ng-template