Wie viel wissen Sie über die Leistungsoptimierung von AngularJS? Hier ist der detaillierte Prozess zur Leistungsoptimierung von AngularJS

Ich kenne angularjs schon seit einiger Zeit, aber ich habe nicht viel über Leistungsprobleme nachgedacht. Als ich das letzte Mal Filter studiert habe, waren Leistungsprobleme im Spiel. Deshalb habe ich auch häufig verwendete Leistungsoptimierungen zusammengefasst. Werfen wir einen Blick darauf

1. Optimieren Sie $watch

1 Jeder weiß, dass

drei Parameter hat und der dritte Parameter

für eine detaillierte Überwachung ist. Dieser Parameter wird hauptsächlich beim Verschachteln von Objekten verwendet. Wenn Sie jedoch nur die Änderungen in den grundlegenden Eigenschaften sehen möchten, verwenden Sie den dritten Parameter nicht für eine detaillierte Überwachung. Dies wird jeden Prozess erheblich verlangsamen. Die Zeit für eine Hörsitzung.

3.ng-if und ng-show$watchtrue Versuchen Sie,

zu verwenden, da ersteres nicht nur

, sondern auch das entsprechende

entfernt.

ng-if und DOM werden einfach ausgeblendet, aber tatsächlich geladen. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte watchangularjs Learning Manual

auf der chinesischen PHP-Website, um mehr zu erfahren)

ng-show 2. $apply und $digest

werden make

Geben Sie

ein und beginnen Sie dann mit der Traversierung von

, um nach Änderungen zu suchen. $applyangular$digest循环 prüft nur das aktuelle $rootScope und dessen

.

$digestAlso, aber wir sind sicher, dass sich eine Operation nur auf das aktuelle scope auswirkt und die Verwendung von 子scope die Leistung leicht verbessern wird.

3. Optimieren Sie ng-repeat scope$digest

verwendet wirklich viele Anweisungen, aber es scheint, dass

oft ignoriert wird.

Unser ng-repeat schreibt oft so: track by

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});

Aber wenn es so geschrieben ist, werden beim Aktualisieren der Seite alle vorhandenen DOMs gelöscht und dann neu erstellt und gerendert. . Aber wenn wir

hinzufügen, wird es anders sein: ng-repeat

ng-repeat="item in items"

Dann

wird Angular das vorhandene DOM aktualisieren und dann die geänderten Teile aktualisieren. Dadurch wird unnötiges Rendern reduziert. track by

4. Andere Optimierungen

复用

sind sehr zeitaufwändig und müssen bei der Veröffentlichung durchgeführt werden.

• console.logVerwenden Sie den Filter mit Vorsicht, er kann in

  vorverarbeitet werden.

• controller Vermeiden Sie die Verwendung von Broadcast-Ereignissen. Sie können stattdessen die bidirektionale Datenbindung oder -freigabe

  verwenden.

• service5. Zusammenfassung über AngularJS

Was ich zusammengefasst habe, ist nicht vollständig, es ist nur das, was ich häufig verwende. Mit zunehmender Nutzung wird sich das Verständnis weiter vertiefen. (Abschließend empfehle ich die Spalte

AngularJS-Referenzhandbuch

auf der chinesischen PHP-Website, in der Sie den AngularJS-Inhalt finden, den Sie lernen möchten)

[Empfehlung des Herausgebers]

AngularJS-Ausdruck Wie verwende ich eine Formel? Beispiele für die Verwendung von Ausdrücken in AngularJS

Was sind die Unterschiede zwischen AngularJS und jQuery? Ergebnisse des AngularJS-Vergleichs mit jQuery

Das obige ist der detaillierte Inhalt vonWie viel wissen Sie über die Leistungsoptimierung von AngularJS? Hier ist der detaillierte Prozess zur Leistungsoptimierung von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!