Rumah >hujung hadapan web >tutorial js >Beberapa petua pengoptimuman untuk angularjs_AngularJS
Sudah ada banyak cara untuk mengoptimumkan ng di Internet Intinya bermula dari sifat dalaman skop $$watchers Hari ini saya akan bercakap tentang perkara lain Intipatinya tetap sama ng. Kecederaan, tetapi saya percaya bahawa selagi kita menggunakan teknik yang sesuai, masalah ini masih boleh dielakkan
ng Pengenalan
angularjs, dirujuk sebagai ng, ialah rangka kerja mvvm yang dihasilkan oleh Google Ia meningkatkan kecekapan pembangunan projek hadapan (dalam amalan, ia sememangnya boleh meningkatkan kecekapan pembangunan dengan pengawal, arahan,). dan perkhidmatan, dan menggunakan DI dalaman yang unik untuk menyelesaikan masalah panggilan sebelum lapisan ketiga Untuk butiran lanjut, sila rujuk analisis kod sumber yang saya tulis sebelum ini
kepincangan ng
Apabila bercakap tentang kelemahan, mari kita bincangkan tentang prinsip pengikatan data ringkasnyaSetiap model yang ditakrifkan pada setiap halaman dalam ng sebenarnya akan menambah pendengar di bawah skop semasa Bekas dalaman ialah tatasusunan $$wachers Selagi mana-mana model pada halaman berubah, kaedah $digest dalam skop dicetuskan. , ia akan mencari semua model dalam pepohon skop semasa untuk memastikan bahawa model pada halaman boleh mendapatkan penyegerakan data, jadi ini sangat memakan masa Pernyataan rasmi ialah apabila 2000 pendengar muncul di halaman prestasi halaman akan menurun dengan ketara. Jadi untuk meningkatkan prestasi ng, kita mesti bermula dari aspek ini.
petua1: Ikat sekali
Sebenarnya, orang lain telah menyatakan perkara ini dalam talian. Biar saya bercakap tentang penggunaan baharu di sini :
kod lama
Wenn Sie jedoch die Synchronisierung aller Modelldaten auf der Seite sicherstellen möchten, müssen Sie immer noch $rootScope aufrufen. Daher ist es am besten, vor dem Schreiben von Code darüber nachzudenken, welche Daten synchron geändert werden müssen.
Tipp3: Rufen Sie ng-repeat so wenig wie möglich an
ng-repeat erstellt standardmäßig viele Listener. Wenn die Datenmenge also groß ist, verbraucht dies meiner Meinung nach nur dann ng-repeat, wenn Sie die Datenliste häufig aktualisieren müssen Es ist auch eine Verschwendung, dort so viele Listener zu platzieren. Zu diesem Zeitpunkt können Sie den mit ng gelieferten $interpolate-Dienst verwenden, um ein Codefragment zu analysieren, das einer statischen Vorlagen-Engine ähnelt. Sein Inneres basiert hauptsächlich auf dem ng-Kern Parsing-Dienst $parse, und dann können diese Codeausschnitte nach dem Ausfüllen der Daten direkt einem einmaligen Modell zugewiesen werden
Tipp4: Versuchen Sie, native Syntax in den Befehl
zu schreibenObwohl ng viele Anweisungen wie ng-show und ng-hide bereitstellt, besteht ihre Funktion darin, ein Codefragment entsprechend dem wahren oder falschen Modell anzuzeigen oder auszublenden. Diese Anweisungen können jedoch schnell Geschäftsanforderungen erfüllen Wenn diese Codefragmente immer noch in einer großen Anweisung vorhanden sind, ist es besser, .show(), .hide() und andere ähnliche jq-Methoden in den Anweisungslink zu schreiben, um sie zu steuern Speichern Sie die Anzahl der Listener. Sie können diese tatsächlich an Ereignisse binden, indem Sie addEventListener in peripheren Anweisungen verwenden. Bevor Sie Code schreiben, ist es jedoch am besten, darüber nachzudenken, wie Sie die Anzahl der Listener erhöhen können Zumindest kann dies die Seitenleistung umfassend verbessern.
Tipp5: Benutzen Sie möglichst wenige Filter auf der Seite
Wenn ein Filter nach dem Modell auf der Seite hinzugefügt wird, führt dies dazu, dass das aktuelle Modell zweimal in $digest ausgeführt wird, was zu unnötiger Leistungsverschwendung führt. Das erste Mal tritt auf, wenn $$watchers beim zweiten Mal Aufgabenänderungen erkennt Versuchen Sie beim Ändern von Modellwerten, die Inline-Filtersyntax so wenig wie möglich zu verwenden, da sich Folgendes stark auf die Seitenleistung auswirkt
Es wird empfohlen, den $filter-Dienst zu verwenden, um eine Filterfunktion im Hintergrund aufzurufen, die die Seitenleistung erheblich verbessern kann. Der Code lautet wie folgt:
Zusammenfassung
Die oben genannten Tipps sind einige Tipps zur Verbesserung der Leistung von NG-Projekten. Nicht standardmäßiger Code beeinträchtigt jedoch auch die Leistung. Daher ist es am besten, vor dem Schreiben des Codes darüber nachzudenken, wo der Listener nicht benötigt wird . .