Ada trik sederhana yang akan membuat kinerja aplikasi AngularJS Anda lebih baik.

Idenya dipinjam dari kerangka Ionic dan ini akan memungkinkan kita untuk memutuskan sambungan cakupan yang dipilih, sehingga iterasi intisari berikutnya tidak akan memicu pengamatnya.

Bagaimana itu bekerja:

  • Angular membuat hierarki $scope objek, dengan $rootScope di atas.
  • Cakupan anak terhubung dan menerapkan struktur data daftar tertaut ganda. Mereka menyimpan referensi ke cakupan sebelumnya dan berikutnya dalam daftar.
  • Kemudian terjadi perubahan, $digest intisari mengeksekusi semua pengamat di $scope, memeriksa apakah nilainya perlu diperbarui. Ini adalah operasi yang mahal.
  • Kemudian perubahan terjadi, $digest mengeksekusi semua pengamat di $scope untuk memeriksa apakah nilainya perlu diperbarui. Ini sangat mahal.
  • Kita dapat memutuskan koneksi heavy$scope, untuk mengurangi jumlah $$watchers yang diaktifkan pada iterasi $digest berikutnya.

Kita hanya memerlukan dua fungsi untuk melakukan semua itu.

Implementasi diambil dari Ionic.

Pada kode di atas, kita perlu memanggil disconnectScope dengan $scope yang ingin kita putuskan sambungannya sebagai argumen: disconnectScope($scopeToBeDisconnected) .

Proses $digest berikutnya akan menghilangkan pengamat pada cakupan yang terputus, karena cakupan tersebut tidak lagi ada dalam daftar.

Kita dapat menggunakan metode $rootScope.countWatchers bawaan untuk melacak bagaimana jumlah pengamat berubah setelah cakupan pemutusan hubungan.

Kasus penggunaan

Kasus penggunaan terbaik untuk teknik ini adalah komponen dengan konten tersembunyi: tab, akordeon, wizard, penomoran halaman, dll.

Ambil contoh tab, kami tidak selalu ingin memicu pengamat di tab yang tidak aktif. Memiliki komponen yang rumit dapat memakan banyak waktu. Kita cukup memutuskan cakupan komponen yang tersembunyi, dan menyambungkannya kembali ketika tab menjadi aktif kembali.

Catatan:

  • $scope yang terputus tidak akan menerima acara apa pun yang disiarkan atau dipancarkan.
  • Setelah tersambung kembali, cakupan akan menjadi simpul ekor dalam daftar.
  • Dalam beberapa kasus, setelah menyambung kembali, kita mungkin perlu menjalankan $digest secara manual untuk menyinkronkan cakupan. Tingkatkan kinerja AngularJS dengan memutuskan sambungan cakupan