Kapan sebaiknya ng-if vs. ng-show / ng-hide?

Saya mengerti itu ng-showdan ng-hidemempengaruhi kelas yang ditetapkan pada elemen dan yang ng-ifmengontrol apakah suatu elemen diberikan sebagai bagian dari DOM.

Apakah ada pedoman untuk memilih ng-iflebih dari ng-show/ ng-hideatau sebaliknya?

Tergantung pada use case Anda tetapi untuk merangkum perbedaannya:

1. ng-ifakan menghapus elemen dari DOM. Ini berarti bahwa semua penangan Anda atau apa pun yang melekat pada elemen-elemen itu akan hilang. Misalnya, jika Anda mengikat penangan klik ke salah satu elemen anak, ketika ng-ifdievaluasi menjadi false, elemen itu akan dihapus dari DOM dan penangan klik Anda tidak akan berfungsi lagi, bahkan setelah ng-ifkemudian mengevaluasi true dan menampilkan elemen. Anda harus memasang kembali pawang.
2. ng-show/ng-hidetidak menghapus elemen dari DOM. Menggunakan gaya CSS untuk menyembunyikan / menampilkan elemen (catatan: Anda mungkin perlu menambahkan kelas Anda sendiri). Dengan cara ini penangan Anda yang melekat pada anak-anak tidak akan hilang.
3. ng-ifmenciptakan ruang lingkup anak sementara ng-show/ng-hidetidak

Elemen yang tidak ada dalam DOM memiliki dampak kinerja yang lebih sedikit dan aplikasi web Anda mungkin tampak lebih cepat bila ng-ifdibandingkan dengan ng-show/ng-hide. Dalam pengalaman saya, perbedaannya dapat diabaikan. Animasi dimungkinkan saat menggunakan keduanya ng-show/ng-hidedan ng-if, dengan contoh untuk keduanya dalam dokumentasi Angular.

Pada akhirnya, pertanyaan yang perlu Anda jawab adalah apakah Anda dapat menghapus elemen dari DOM atau tidak?

Lihat di sini untuk CodePen yang menunjukkan perbedaan cara kerja ng-if / ng-show, DOM-bijaksana.

@markovuksanovic telah menjawab pertanyaan dengan baik. Tapi saya datang dari perspektif lain: Saya selalu menggunakan ng-ifdan mengeluarkan elemen-elemen itu dari DOM, kecuali:

1. Anda karena suatu alasan memerlukan data-binding dan $watch-es pada elemen Anda untuk tetap aktif saat mereka tidak terlihat. Formulir mungkin merupakan kasus yang bagus untuk ini, jika Anda ingin dapat memeriksa validitas pada input yang saat ini tidak terlihat, untuk menentukan apakah seluruh formulir valid.
2. Anda menggunakan beberapa logika stateful yang sangat rumit dengan penangan event bersyarat, seperti yang disebutkan di atas. Yang mengatakan , jika Anda menemukan diri Anda secara manual melampirkan dan melepaskan penangan, sehingga Anda kehilangan status penting ketika Anda menggunakan ng-jika, tanyakan pada diri sendiri apakah keadaan itu akan lebih terwakili dalam model data, dan penangan diterapkan secara kondisional oleh arahan setiap kali elemen diberikan. Dengan kata lain, ada / tidaknya penangan adalah bentuk data negara. Keluarkan data itu dari DOM, dan masuk ke dalam model. Ada / tidaknya penangan harus ditentukan oleh data, dan dengan demikian mudah dibuat ulang.

Angular ditulis dengan sangat baik. Ini cepat, mengingat apa yang dilakukannya. Tapi yang dilakukannya adalah sejumlah sihir yang membuat hal-hal sulit (seperti pengikatan data 2 arah) terlihat mudah. Membuat semua hal itu terlihat mudah memerlukan beberapa overhead kinerja. Anda mungkin terkejut mengetahui berapa ratus atau ribuan kali fungsi setter dievaluasi selama $digestsiklus pada sebongkah DOM yang bahkan tidak ada yang melihatnya. Dan kemudian Anda menyadari bahwa Anda memiliki puluhan atau ratusan elemen tak kasat mata yang semuanya melakukan hal yang sama ...

Desktop mungkin memang cukup kuat untuk membuat sebagian besar masalah kecepatan eksekusi JS bisa diperdebatkan. Tetapi jika Anda sedang mengembangkan untuk seluler, menggunakan ng-jika kapan pun memungkinkan secara manusia seharusnya tidak perlu khawatir. Kecepatan JS masih penting pada prosesor seluler. Menggunakan ng-if adalah cara yang sangat mudah untuk mendapatkan optimasi yang berpotensi signifikan dengan biaya yang sangat, sangat rendah.

Dari pengalaman saya:

1) Jika halaman Anda memiliki toggle yang menggunakan ng-if / ng-show untuk menampilkan / menyembunyikan sesuatu, ng-jika menyebabkan lebih banyak penundaan browser (lebih lambat). Misalnya: jika Anda memiliki tombol yang digunakan untuk berganti antara dua tampilan, ng-show tampaknya lebih cepat.

2) ng-if akan membuat / menghancurkan lingkup ketika dievaluasi benar / salah. Jika Anda memiliki pengontrol yang terpasang pada ng-if, kode pengontrol itu akan dieksekusi setiap kali ng-if bernilai true. Jika Anda menggunakan ng-show, kode pengontrol hanya dijalankan sekali. Jadi jika Anda memiliki tombol yang berganti-ganti antara beberapa tampilan, menggunakan ng-if dan ng-show akan membuat perbedaan besar dalam cara Anda menulis kode pengontrol Anda.

Jawabannya tidak sederhana:

Itu tergantung pada mesin target (mobile vs desktop), itu tergantung pada sifat data Anda, browser, OS, perangkat keras yang dijalankannya ... Anda perlu melakukan benchmark jika Anda benar-benar ingin tahu.

Ini sebagian besar masalah memori vs komputasi ... karena dengan sebagian besar masalah kinerja perbedaannya dapat menjadi signifikan dengan elemen berulang (n) seperti daftar, terutama ketika bersarang (nxn, atau lebih buruk) dan juga jenis komputasi apa yang Anda jalankan di dalam elemen-elemen ini. :

• ng-show : Jika elemen-elemen opsional sering hadir (padat), seperti katakanlah 90% dari waktu, mungkin lebih cepat untuk membuatnya siap dan hanya menampilkan / menyembunyikannya, terutama jika kontennya murah (hanya teks biasa, tidak ada untuk menghitung atau memuat). Ini menghabiskan memori karena mengisi DOM dengan elemen tersembunyi, tetapi hanya menampilkan / menyembunyikan sesuatu yang sudah ada kemungkinan merupakan operasi yang murah untuk browser.

• ng-if : Jika sebaliknya elemen cenderung tidak diperlihatkan (jarang) cukup buat dan hancurkan secara real time, terutama jika kontennya mahal (perhitungan / disortir / disaring, gambar, gambar yang dihasilkan). Ini ideal untuk elemen langka atau 'sesuai permintaan', ini menghemat memori dalam hal tidak mengisi DOM tetapi dapat menghabiskan banyak biaya komputasi (membuat / menghancurkan elemen) dan bandwidth (mendapatkan konten jarak jauh). Ini juga tergantung pada seberapa banyak Anda menghitung dalam tampilan (pemfilteran / penyortiran) vs apa yang sudah Anda miliki dalam model (data pra-diurutkan / pra-disaring).

Satu catatan penting:

ngIf (tidak seperti ngShow) biasanya membuat cakupan anak yang dapat menghasilkan hasil yang tidak terduga.

Saya memiliki masalah yang berkaitan dengan ini dan saya telah menghabiskan banyak waktu untuk mencari tahu apa yang sedang terjadi.

(Arahan saya menulis nilai modelnya ke ruang lingkup yang salah.)

Jadi, untuk menyelamatkan rambut Anda cukup gunakan ngShow kecuali jika Anda berlari terlalu lambat.

Perbedaan kinerja hampir tidak terlihat pula dan saya belum yakin siapa yang mendukungnya tanpa tes ...

ng-jika pada ng-include dan pada ng-controller akan berdampak besar pada ng-include tidak akan memuat parsial yang diperlukan dan tidak memproses kecuali flag benar pada ng-controller tidak akan memuat controller kecuali flag benar tetapi masalahnya adalah ketika sebuah bendera menjadi palsu di ng-jika ia akan menghapus dari DOM ketika bendera menjadi benar kembali itu akan memuat ulang DOM dalam hal ini ng-show lebih baik, untuk satu kali acara ng-jika lebih baik

Jika Anda menggunakan ng-show or ng-hidekonten (mis. Thumbnail dari server) akan dimuat terlepas dari nilai ekspresi tetapi akan ditampilkan berdasarkan nilai ekspresi.

Jika Anda menggunakan ng-ifkonten akan dimuat hanya jika ekspresi ng-if bernilai kebenaran.

Menggunakan ng-if adalah ide yang bagus dalam situasi di mana Anda akan memuat data atau gambar dari server dan menunjukkannya hanya tergantung pada interaksi pengguna. Dengan cara ini, memuat halaman Anda tidak akan diblokir oleh tugas intensif yang tidak perlu.