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 ringkasnya

Setiap 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

Salin kod Kod adalah seperti berikut:

hello

kod baharu

Salin kod Kod adalah seperti berikut:

hello

Anda dapat melihat bahawa sintaks baharu adalah untuk menambah :: di hadapan model saya percaya sintaks ini lebih mudah daripada pemalam pihak ketiga yang digunakan dalam talian.

Salin kod Kod adalah seperti berikut:

tip2: $scope.$digest vs $scope.$apply

Saya percaya ramai orang biasa dengan kaedah $apply Ia biasanya digunakan apabila kod tidak dilaksanakan dalam persekitaran ng Untuk memastikan penyegerakan data halaman, memanggil kaedah $apply selepas pelaksanaan kod selesai. mencetuskan $digest dalaman untuk menyemak kesan Semua model dalam domain sebenarnya dipanggil seperti ini secara dalaman Hanya beberapa coretan kod yang ditulis di bawah.

Salin kod Kod adalah seperti berikut:

...
...
$rootScope.$digest
...
...

Apa yang sebenarnya dilakukan ialah memanggil $digest di bawah skop akar $rootScope Jadi apakah perbezaan antara $digest di bawah skop yang berbeza Sebenarnya, perbezaan yang paling penting ialah

Salin kod Kod adalah seperti berikut:

$digest hanya mencari secara mendalam semua model di bawah pemanggil


Daher spart $scope im Vergleich zu $rootScope viel Zeit bei der Suche nach Modellen.

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 schreiben

Obwohl 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:

Code kopieren Der Code lautet wie folgt:

$filter('filter')(array, expression, comparator);

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 . .