Sudah ada banyak cara untuk mengoptimalkan NG online. Inti adalah semua tentang atribut internal ruang lingkup $$ Watchers. Hari ini saya akan membicarakan hal lain, esensinya tetap tidak berubah karena ini adalah cacat NG. Namun, saya percaya bahwa selama Anda menggunakan metode yang tepat, masalah ini masih dapat dihindari.
Perkenalan
AngularJS disingkat NG, yang merupakan kerangka kerja MVVM yang diproduksi oleh Google. Ini meningkatkan efisiensi pengembangan proyek front-end (dalam praktiknya, itu memang dapat meningkatkan efisiensi pengembangan). Ini menggunakan pengontrol, instruksi, dan layanan untuk berputar di seluruh proyek, dan menggunakan DI unik untuk menyelesaikan masalah panggilan sebelum lapisan ketiga. Untuk detail lebih lanjut, silakan merujuk ke analisis kode sumber NG yang saya tulis sebelumnya.
Luka keras Ng
Ketika datang ke cacat, pertama -tama kita harus berbicara tentang prinsip pengikatan data yang sederhana
Model yang ditentukan pada setiap halaman di NG sebenarnya akan menambahkan pendengar ke ruang lingkup saat ini. Wadah internal adalah array $$ wachers. Selama model apa pun di halaman berubah, metode $ Digest di dalam ruang lingkup akan dipicu. Ini akan mencari semua model di pohon lingkup saat ini pada gilirannya untuk memastikan bahwa model pada halaman bisa mendapatkan sinkronisasi data, jadi ini sangat memakan waktu. Pernyataan resmi adalah bahwa ketika 2.000 pendengar muncul di halaman, kinerja halaman akan turun secara signifikan. Oleh karena itu, untuk meningkatkan kinerja NG, Anda harus mulai dari aspek ini.
Tip1: Binding satu kali
Bahkan, orang lain sudah mengatakan ini secara online. Ini penggunaan baru. Versi 1.3.0+ dari NG telah menyediakan sintaks untuk mendukung situasi di mana model hanya terikat sekali. Lihat contoh di bawah ini
kode lama
Halo
kode baru
Halo
Anda dapat melihat bahwa sintaks baru adalah untuk menambahkan :: di depan model. Saya percaya sintaks ini jauh lebih nyaman daripada plug-in pihak ketiga yang digunakan secara online.
Tip2: $ scope. $ Digest vs $ scope. $ Apply
Saya percaya banyak orang yang akrab dengan metode $ Apply. Ini umumnya digunakan saat menjalankan kode di lingkungan NG, untuk memastikan sinkronisasi data halaman, memanggil metode $ Apply setelah eksekusi kode akan memicu internal $ Digest untuk memeriksa semua model dalam ruang lingkup. Bahkan, ini disebut di dalamnya, hanya beberapa cuplikan kode yang ditulis di bawah ini.
... $ rootscope. $ Digest ...
Semuanya benar -benar memanggil $ Digest di bawah cakupan root $ rootscope. Jadi apa perbedaan antara $ digest di bawah lingkup yang berbeda? Faktanya, perbedaan terpenting adalah itu
$ Digest Only Deep mencari semua model di bawah penelepon
Oleh karena itu, dibandingkan dengan $ scope, $ rootscope, ia menghemat banyak waktu untuk menemukan model.
Namun, jika Anda ingin memastikan sinkronisasi semua data model pada halaman, Anda masih harus menghubungi $ rootscope, jadi yang terbaik adalah memikirkan data mana yang harus disinkronkan sebelum menulis kode.
Tip3: Hubungi NG-RePeat sesedikit mungkin
NG-Repeat akan membuat banyak pendengar secara default, jadi ketika volume data besar, ini mengkonsumsi kinerja halaman. Saya pikir NG-RePeat hanya diperlukan ketika Anda perlu memperbarui daftar data, jika tidak, itu akan menjadi sia-sia untuk menempatkan begitu banyak pendengar di sana. Pada saat ini, Anda dapat menggunakan layanan interpolate $ NG sendiri untuk menguraikan cuplikan kode, mirip dengan mesin template statis, yang terutama bergantung pada layanan parsing inti NG $ parse, dan kemudian langsung menetapkan cuplikan kode ini setelah mengisi data ke model satu kali.
Tip4: Coba tulis sintaks asli dalam perintah
Meskipun NG memberikan banyak instruksi seperti NG-Show dan NG-Hide, fungsinya adalah untuk menampilkan atau menyembunyikan cuplikan kode berdasarkan model yang benar dan salah. Meskipun dapat dengan cepat menerapkan persyaratan bisnis, instruksi ini masih akan menambah pendengar secara default. Jika cuplikan kode ini ada dalam instruksi besar, cara yang lebih baik adalah menulis metode JQ yang serupa seperti .show () dan .Hide () di tautan instruksi untuk mengendalikannya, yang dapat menyimpan jumlah pendengar, dan instruksi peristiwa serupa. Ini sebenarnya dapat mengikat peristiwa dalam instruksi periferal dengan menggunakan AddEventListener. Ngomong -ngomong, sebelum menulis kode, yang terbaik adalah memikirkan cara meminimalkan jumlah pendengar, sehingga kinerja halaman dapat ditingkatkan secara komprehensif.
Tip5: Gunakan filter sesedikit mungkin di halaman
Saat menambahkan filter di belakang model di halaman, ini akan menyebabkan model saat ini berjalan dua kali dalam $ digest, menyebabkan limbah kinerja yang tidak perlu. Pertama kali adalah ketika tugas deteksi $$ Watchers berubah; Kedua kalinya terjadi ketika nilai model dimodifikasi, jadi cobalah untuk menggunakan sintaks filter saat inline sesedikit mungkin. Seperti berikut ini sangat mempengaruhi kinerja halaman
Disarankan untuk menggunakan layanan $ filter untuk memanggil fungsi filter di latar belakang, yang secara signifikan dapat meningkatkan kinerja halaman. Kodenya adalah sebagai berikut
$ filter ('filter') (array, ekspresi, pembanding);
Meringkaskan
Di atas adalah beberapa tips untuk meningkatkan kinerja proyek NG. Meskipun NG sangat kuat, kode tidak teratur juga akan menghancurkan kinerjanya. Oleh karena itu, yang terbaik adalah memikirkan di mana pendengar tidak diperlukan sebelum menulis kode.
Di atas adalah untuk mengatur dan menambahkan informasi yang relevan ke informasi optimasi AngularJS. Terima kasih atas dukungan Anda untuk situs ini!