1

Wie die meisten Leute in ihrer AngularJS-Karriere machen, habe ich einen Performance-Flaschenhals in meiner App geknackt und ich habe den Profiler in Chrome verwendet, um es herauszufinden Warum.angular.equals() nimmt 50% der Ausführungszeit in Anspruch

Nur als Nebenbei; Ich habe getan, was ich als normale Optimierungen für AngularJS-Apps betrachte, und ich habe keine übermäßigen Beobachter [~ 300]. Ich verwende jedoch Angular Google Maps und Angular Material.

Die Hauptsache im Profiler ist eine Funktion namens equals in AngularJS, die 50% der Zeit beansprucht. Interessanterweise verwende ich angular.equals nicht in meinem Code, also erwarte ich einen internen Angular-Prozess (Digest-Zyklus?) Oder eine externe Bibliothek - obwohl ich den Quellcode in den meisten der großen Bibliotheken überprüft habe, die ich verwende und sie .equals() sparsam verwenden.

Kann mir jemand Hinweise geben, wo ich suchen muss oder welche Art von Code ich untersuchen muss, um herauszufinden, was diese übermäßigen Gleichheitsprüfungen verursacht?

enter image description here

Antwort

4

Da die Stack-Trace zeigt, wird equals() rekursiv aus $digest genannt, wenn es alle Beobachter auswertet. wie in der documentation angegeben

Watchers wird angular.equals() verwenden, wenn Sie die objectEquality Option verwendet haben,:

Wenn objectEquality == true, Ungleichheit der watchExpression wird entsprechend der angular.equals Funktion bestimmt. Um den Wert des Objekts für den späteren Vergleich zu speichern, wird die Funktion angular.copy verwendet. Dies bedeutet also, dass das Beobachten komplexer Objekte nachteilige Auswirkungen auf Speicher und Leistung haben wird.

Also ich würde die einfachste Antwort sagen, entweder wenige Beobachter zu verwenden oder die objectEquality Option mehr sparsam zu verwenden.

+0

Ich denke, es geht um das System zur Überprüfung der Verschmutzung auf den Mechanismus, um Änderungen zu erkennen, oder? –

+0

@LenilsondeCastro Das könnte auch ein Faktor sein. Ich bin nicht so versiert in Angulars Interna, aber Sie können sehen, wie '$ Digest' hier implementiert ist (https://github.com/angular/angular.js/blob/03043839d5a540b02208001fe12e812dfde00a8e/src/ng/rootScope. js). – JLRishe

+0

Vielen Dank für die Antwort, ich wusste nicht, wie die "objectEquality" -Option die Leistung beeinflusst. Nachdem ich gesagt habe, dass ich sehr wenige '$ scope. $ Watch' benutze, verwende ich 'objectEquality' nicht. Ist es besser $ $ scope. $ Watch ("expression", ...) 'oder' $ scope. $ Watch (() => {return $ scope.value;}, ...) ' – Chris

Verwandte Themen