Apa itu anak-anak tercepat () atau temukan () di jQuery?

320

Untuk memilih simpul anak di jQuery seseorang dapat menggunakan anak-anak () tetapi juga menemukan ().

Sebagai contoh:

$(this).children('.foo');

memberikan hasil yang sama seperti:

$(this).find('.foo');

Sekarang, opsi mana yang paling cepat atau disukai dan mengapa?

jquery jquery-selectors Bart
sumber
27
.find()dan .children()tidak sama. Yang terakhir hanya melakukan perjalanan satu tingkat ke bawah pohon DOM, seperti pemilih anak.
Timothy003
1
@ Timothy003 Anda salah menggambarkannya, yang pertama berjalan satu tingkat ke bawah bukan yang terakhir
Dipesh Rana
5
@DipeshRana 'yang terakhir' diterapkan pada kalimat Timothy003 sendiri, bukan pertanyaan.
Jayesh Bhoot
1
Terima kasih telah mengangkat masalah ini. Dalam banyak kasus perbedaan kinerja itu sepele, tetapi dokumen tidak benar-benar menyebutkan bahwa kedua metode ini diterapkan secara berbeda! Demi praktik terbaik, ada baiknya mengetahui bahwa find()hampir selalu lebih cepat.
Steve Benner
Itu sebabnya saya tidak pernah menyukai konstruksi "yang pertama" atau "yang terakhir" dalam bahasa Inggris. Katakan saja yang Anda maksud. Sheesh.
Chris Walker

Jawaban:

415

children()hanya melihat anak-anak langsung dari node, sementara find()melintasi seluruh DOM di bawah node, jadi children() harus lebih cepat diberikan implementasi yang setara. Namun, find()menggunakan metode peramban asli , sementara children()menggunakan JavaScript yang ditafsirkan dalam peramban. Dalam percobaan saya tidak ada banyak perbedaan kinerja dalam kasus-kasus tertentu.

Yang digunakan tergantung pada apakah Anda hanya ingin mempertimbangkan keturunan langsung atau semua node di bawah ini dalam DOM, yaitu, pilih metode yang sesuai berdasarkan hasil yang Anda inginkan, bukan kecepatan metode. Jika kinerja benar-benar masalah, maka bereksperimenlah untuk menemukan solusi terbaik dan menggunakannya (atau lihat beberapa tolok ukur dalam jawaban lain di sini).

tvanfosson
sumber
9
Tentu, tetapi apa yang terjadi jika elemen induk hanya memiliki simpul anak? Saya akan melakukan beberapa profil pada ini.
jason
11
Kinerja anak-anak vs find tergantung pada browser dan pada seberapa kompleks subtitle DOM adalah pencarian Anda. Pada browser modern, temukan () secara internal menggunakan querySelectorAll yang dengan mudah dapat mengungguli anak-anak () dalam pemilih kompleks dan pada subtree DOM kecil hingga sedang.
LeJared
Akan membantu memberikan beberapa hasil kuantitatif percobaan Anda.
Lukas
Bagi saya dalam semua tes dengan hierarki bersarang antara 5 dan 20, temukan () selalu mengungguli anak-anak (). (diuji di Google Chrome 54) Saya mengharapkan yang sebaliknya. Jadi mulai sekarang, saya akan mengambil cara mudah dan menemukan (...) elemen saya alih-alih melintasi mereka melalui anak-anak (). Anak-anak (). Anak-anak () ...
Ruwen
179

Tes jsPerf ini menunjukkan bahwa find () lebih cepat. Saya membuat tes yang lebih menyeluruh , dan sepertinya masih menemukan () mengungguli anak-anak ().

Pembaruan: Sesuai komentar tvanfosson, saya membuat test case lain dengan 16 level sarang. find () hanya lebih lambat ketika menemukan semua div yang mungkin, tetapi find () masih mengungguli anak-anak () ketika memilih level divs pertama.

anak-anak () mulai mengungguli find () ketika ada lebih dari 100 level sarang dan sekitar 4000+ divs untuk find () untuk dilintasi. Ini kasus uji dasar, tetapi saya masih berpikir bahwa find () lebih cepat daripada anak-anak () dalam banyak kasus.

Saya melangkah melalui kode jQuery di Alat Pengembang Chrome dan memperhatikan bahwa anak-anak () secara internal membuat panggilan ke saudara (), memfilter (), dan melewati beberapa regex daripada yang ditemukan ().

find () dan anak-anak () memenuhi kebutuhan yang berbeda, tetapi dalam kasus di mana find () dan anak-anak () akan menampilkan hasil yang sama, saya akan merekomendasikan menggunakan find ().

JR.
sumber
4
Tampaknya anak-anak menggunakan metode dom traversal dan menemukan menggunakan api pemilih, yang lebih cepat.
topek
4
Kasing uji yang cukup merosot karena Anda hanya memiliki satu tingkat sarang. Jika Anda ingin kasus umum Anda harus menyiapkan beberapa kedalaman bersarang sembarang dan memeriksa kinerja ketika menemukan () melintasi pohon yang lebih dalam daripada anak-anak ().
tvanfosson
Jika Anda memeriksa apakah elemen anak tunggal tertentu (mis. Event.target) ada dalam elemen dom tertentu (mis. $ ('. Navbar')) maka $ .contains (ini, event.target) sejauh ini merupakan yang tercepat (8,433.609 / detik vs 140k untuk pencarian jquery tercepat). jsperf.com/child-is-in-parent
Chris Sattinger
92

Berikut ini tautan yang memiliki tes kinerja yang dapat Anda jalankan. find()sebenarnya sekitar 2 kali lebih cepat daripada children().

Chrome di OSX10.7.6

maktif
sumber
$ .contains (document.getElementById ('list'), $ ('. test') [0]) adalah 8,433,609 / detik. Jika Anda memiliki elemen spesifik dan hanya ingin tahu apakah B dalam A maka ini yang terbaik. jsperf.com/child-is-in-parent
Chris Sattinger
Tes yang bagus. Perhatikan bahwa ini bisa menjadi lebih cepat jika Anda melakukan sesuatu seperti di var $test = $list.find('.test');mana $ list adalah objek jQuery. jsperf.com/jquery-selectors-context/101
Maciej Krawczyk
24

Itu tidak akan memberikan hasil yang sama: Anda find()akan mendapatkan simpul turunan , sedangkan Anda children()hanya akan mendapatkan anak - anak langsung yang cocok.

Pada satu titik, find()jauh lebih lambat karena harus mencari setiap simpul keturunan yang bisa menjadi pasangan, dan bukan hanya anak-anak langsung. Namun, ini tidak lagi benar; find()jauh lebih cepat karena menggunakan metode browser asli.

John Feminella
sumber
1
Tidak menurut jawaban yang lain haha: p. Hanya ketika Anda memiliki pohon DOM yang sangat, sangat, sangat besar ..
pgarciacamou
1
@Camou Jawaban ini sudah empat tahun. find()jauh lebih lambat pada saat itu!
John Feminella
@camou mengatakan bahwa bagian kinerja adalah "Tidak sesuai dengan jawaban yang lain". Paragraf pertama jawaban ini akurat.
Don Cheadle
14

Tak satu pun dari jawaban yang lain ditangani dengan kasus menggunakan .children()atau .find(">")untuk hanya mencari anak-anak langsung dari elemen induk. Jadi, saya membuat tes jsPerf untuk mengetahuinya , menggunakan tiga cara berbeda untuk membedakan anak-anak.

Seperti yang terjadi, bahkan ketika menggunakan pemilih "" ekstra, .find()masih jauh lebih cepat daripada .children(); pada sistem saya, 10x jadi.

Jadi, dari sudut pandang saya, tampaknya tidak ada banyak alasan untuk menggunakan mekanisme penyaringan .children()sama sekali.

Craig Walker
sumber
3
Terima kasih atas komentar ini! Saya bertanya-tanya apakah jQuery seharusnya beralih ke membuat .children (x) menjadi alias untuk .find (">" + x), meskipun mungkin ada komplikasi lain yang tidak saya pikirkan.
Michael Scott Cuthbert
1
Ini sepertinya perbandingan yang paling tepat. Terima kasih!
GollyJer
3

Keduanya find()dan children()metode digunakan untuk menyaring anak dari elemen yang cocok, kecuali yang pertama bergerak ke tingkat mana pun, yang kedua bergerak ke tingkat yang lebih rendah.

Untuk menyederhanakan:

  1. find() - Cari melalui anak elemen, cucu, buyut, elemen yang cocok ... semua level di bawah.
  2. children() - Cari melalui anak-anak elemen yang cocok saja (satu tingkat ke bawah).
Naresh Kumar
sumber