Es gibt bereits viele Möglichkeiten, NG online zu optimieren. Im Kern dreht sich alles um die internen Attribute des Umfangs von $$ -Beobachtern. Heute werde ich über etwas anderes sprechen, die Essenz bleibt unverändert, weil dies ein Fehler von NG ist. Ich glaube jedoch, dass diese Probleme noch vermieden werden können, solange Sie geeignete Methoden anwenden.
Einführung
AngularJS wird als NG abgekürzt, einem von Google erzeugten MVVM -Framework. Dies verbessert die Entwicklungseffizienz von Front-End-Projekten (in der Praxis kann sie tatsächlich die Entwicklungseffizienz verbessern). Es verwendet Controller, Anweisungen und Dienste, um sich um das gesamte Projekt zu drehen, und einzigartige DI, um die Anrufprobleme vor der dritten Schicht zu lösen. Weitere Informationen finden Sie in der NG -Quellcodeanalyse, die ich zuvor geschrieben habe.
Ngs harte Wunde
Wenn es um Fehler geht, müssen wir zunächst über das einfache Datenbindungsprinzip sprechen
Das auf jeder Seite in NG definierte Modell fügt dem aktuellen Bereich tatsächlich einen Hörer hinzu. Der interne Container ist das $$ Wachers -Array. Solange sich jedes Modell auf der Seite ändert, wird die $ Digest -Methode innerhalb des Bereichs ausgelöst. Es wird nach allen Modellen im aktuellen Bereichsbaum gesucht, um sicherzustellen, dass die Modelle auf der Seite die Datensynchronisation erhalten können. Dies ist daher sehr zeitaufwändig. Die offizielle Erklärung ist, dass die Seitenleistung erheblich sinkt, wenn 2.000 Hörer auf der Seite erscheinen. Um die Leistung von NG zu verbessern, müssen Sie daher von diesem Aspekt ausgehen.
TIP1: einmalige Bindung
Tatsächlich hat dies bereits jemand anderes online gesagt. Hier ist eine neue Verwendung. Die 1.3.0+ -Version von NG hat bereits eine integrierte Syntax bereitgestellt, um die Situation zu unterstützen, in der das Modell nur einmal gebunden ist. Siehe das folgende Beispiel:
alter Code
Die Codekopie lautet wie folgt:
Hallo
neuer Code
Die Codekopie lautet wie folgt:
Hallo
Sie können sehen, dass die neue Syntax vor dem Modell hinzufügen soll. Ich glaube, diese Syntax ist viel bequemer als die online verwendeten Plug-Ins von Drittanbietern.
Die Codekopie lautet wie folgt:
TIP2: $ scope. $ digest vs $ scope. $ bewerben
Ich glaube, viele Menschen sind mit der $ Apply -Methode vertraut. Es wird im Allgemeinen verwendet, wenn Code in der NG -Umgebung ausgeführt wird, um sicherzustellen, dass die Datensynchronisation der Seite die $ anwenden -Methode nach der Codeausführung aufgerufen wird, um den internen $ digest auszulösen, um alle Modelle im Bereich des Geltungsbereichs zu überprüfen. Tatsächlich wird dies darin genannt, und nur einige Code -Snippets sind unten geschrieben.
Die Codekopie lautet wie folgt:
...
...
$ rootscope. $ digest
...
...
Alle nennen $ Digest tatsächlich unter dem Wurzelbereich von $ rootscope. Was ist der Unterschied zwischen $ Digest unter verschiedenen Bereichen? In der Tat ist der wichtigste Unterschied, dass das
Die Codekopie lautet wie folgt:
$ digest nur tiefe Suche alle Modelle unter dem Anrufer
Daher spart es im Vergleich zu $ Scope $ rootscope viel Zeit, um Modelle zu finden.
Wenn Sie jedoch die Synchronisation aller Modelldaten auf der Seite sicherstellen möchten, müssen Sie noch $ rootscope aufrufen. Daher ist es am besten, darüber nachzudenken, welche Daten vor dem Schreiben des Codes synchronisiert werden sollten.
TIP3: Rufen Sie die NG-Wiederholung so wenig wie möglich an
NG-Repeat erzeugt standardmäßig viele Hörer. Wenn das Datenvolumen groß ist, verbraucht dies die Seitenleistung. Ich denke, NG-Repeat ist nur erforderlich, wenn Sie die Datenliste häufig aktualisieren müssen. Andernfalls wäre es eine Verschwendung, so viele Zuhörer dorthin zu bringen. Zu diesem Zeitpunkt können Sie den eigenen $ Interpolar-Service von NG verwenden, um einen Code-Snippet zu analysieren, ähnlich einer statischen Vorlage-Engine, die hauptsächlich auf den Kern-Parsing-Dienst von NG $ $ Parse beruht, und diese Code-Snippets dann direkt zuweisen, nachdem sie die Daten einem einmaligen Modell ausgefüllt haben.
TIP4: Versuchen Sie, native Syntax in den Befehl zu schreiben
Obwohl NG viele Anweisungen wie ng-show und ng-hide liefert, ist es ihre Funktion, einen Code-Snippet basierend auf dem wahren und falschen Modell anzuzeigen oder auszublenden. Obwohl es die Geschäftsanforderungen schnell implementieren kann, werden diese Anweisungen standardmäßig die Zuhörer hinzufügen. Wenn diese Code -Snippets in einer großen Anweisung vorhanden sind, ist es, ähnliche JQ -Methoden wie .show () und .hide () in den Anweisungsverbindung zu schreiben, um es zu steuern, wodurch die Anzahl der Zuhörer und ähnliche Ereignisanweisungen speichern können. Diese können tatsächlich Ereignisse in peripheren Anweisungen mit AddEventListener binden. Vor dem Schreiben von Code ist es am besten, darüber nachzudenken, wie die Anzahl der Hörer minimiert werden kann, damit die Seitenleistung umfassend verbessert werden kann.
TIP5: Verwenden Sie auf der Seite so wenig Filter wie möglich
Wenn Sie Filter hinter dem Modell auf der Seite hinzufügen, wird das aktuelle Modell zweimal in $ digest ausgeführt, was zu unnötigen Leistungsabfällen führt. Das erste Mal ist, wenn sich die Erkennung von $$ Watchers ändert. Das zweite Mal tritt beim Modifizieren des Modellwerts auf. Versuchen Sie daher, die Filtersyntax zu verwenden, wenn Sie so wenig wie möglich inline sind. Wie die folgenden Auswirkungen auf die Leistung der Seite beeinflussen
Es wird empfohlen, den $ Filter -Dienst zu verwenden, um eine Filterfunktion im Hintergrund aufzurufen, wodurch die Seitenleistung erheblich verbessern kann. Der Code ist wie folgt
Die Codekopie lautet wie folgt:
$ filter ('filter') (Array, Ausdruck, Vergleicher);
Zusammenfassen
Die oben genannten sind einige Tipps zur Verbesserung der Leistung von NG -Projekten. Obwohl NG sehr leistungsfähig ist, wird der unregelmäßige Code auch seine Leistung zerstören. Daher ist es am besten, darüber nachzudenken, wo die Hörer vor dem Schreiben von Code nicht benötigt werden.