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