JQuery'de en hızlı çocuklar () veya find () nedir?

320

JQuery'de bir alt düğüm seçmek için children () kullanılabilir ancak find () da kullanılabilir.

Örneğin:

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

aynı sonucu verir:

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

Şimdi, hangi seçenek en hızlı veya tercih edilir ve neden?

jquery jquery-selectors

— baronet
kaynak

27

.find()ve .children()aynı değil. İkincisi, DOM'da bir alt seçici gibi yalnızca tek bir seviye hareket eder.

— Timothy003

1

@ Timothy003 Yanlış tarif ettiniz, birincisi

— ikinciyi

5

@DipeshRana 'ikincisi' Timothy003'ün kendi cümlesine uygulandı, soruya değil.

— Jayesh Bhoot

1

Bu sorunu gündeme getirdiğin için teşekkürler. Birçok durumda performans farkı önemsizdir, ancak dokümanlar aslında bu iki yöntemin farklı uygulandığından bahsetmezler! En iyi uygulamalar uğruna, bunun find()neredeyse her zaman daha hızlı olduğunu bilmek iyidir .

— Steve Benner

Bu yüzden İngilizce "eski" ya da "ikinci" yapıyı hiç sevmedim. Sadece hangisini kastettiğini söyle. Sheesh.

— Chris Walker

415

children()sadece düğümün hemen altındaki çocuklarına bakar, düğümün find()altındaki tüm DOM'u geçerken, eşdeğer uygulamalar göz önüne alındığında daha hızlı children() olmalıdır . Ancak, tarayıcıda yorumlanan JavaScript'ifind() kullanırken yerel tarayıcı yöntemlerini children()kullanır . Deneylerimde, tipik durumlarda çok fazla performans farkı yoktur.

Kullanılacak olan, DOM'da yalnızca yakın torunları mı yoksa bunun altındaki tüm düğümleri mi değerlendirmek istediğinize bağlıdır, yani, yöntemin hızına değil, istediğiniz sonuçlara göre uygun yöntemi seçin. Performans gerçekten bir sorunsa, en iyi çözümü bulmayı deneyin ve bunu kullanın (veya diğer yanıtlardaki bazı kıstaslara bakın).

— tvanfosson
kaynak

9

Elbette, ancak üst öğenin yalnızca alt düğümleri varsa ne olur? Bu konuda profilleme yapacağım.

— jason

11

Çocukların bulmaya karşı performansı, tarayıcıya ve DOM alt ağacının aramanızın ne kadar karmaşık olduğuna bağlıdır. Modern tarayıcılarda find () dahili olarak karmaşık seçicideki ve küçük ila orta DOM alt ağacındaki çocuklardan () kolayca daha iyi performans gösterebilecek querySelectorAll kullanır.

— LeJared

Denemelerinizin bazı nicel sonuçlarını sunmanıza yardımcı olur.

— Luke

Benim için 5 ile 20 arasında hiyerarşi yuvaları olan tüm testlerde find () her zaman daha iyi performans gösteren çocuklar (). (Google Chrome 54'te test edildi) Yani şu andan itibaren, ben kolay yolu alacağım ve çocuklara aracılığıyla onları çaprazlayan (...) Benim elemanları yerine bulmak () çocuk () çocuk (...)..

— Ruwen

179

Bu jsPerf testi find () işlevinin daha hızlı olduğunu gösterir. Daha kapsamlı bir test oluşturdum ve hala find () çocuklardan () daha iyi performans gösteriyor gibi görünüyor.

Güncelleme: Tvanfosson'un yorumuna göre, 16 yuvalama seviyesine sahip başka bir test durumu oluşturdum . find () yalnızca tüm olası div'ları bulurken daha yavaştır, ancak find (), div'in ilk seviyesini seçerken hala çocuklardan () daha iyi performans gösterir.

100'den fazla iç içe yerleştirme seviyesi ve find () 'ın geçmesi için yaklaşık 4000+ div olduğunda çocuklar () find ()' den daha iyi performans göstermeye başlar. Bu ilkel bir test örneğidir, ancak yine de find () işlevinin çoğu durumda çocuklardan () daha hızlı olduğunu düşünüyorum.

Chrome Geliştirici Araçları'ndaki jQuery kodundan geçtim ve children () dahili olarak sibling (), filter () çağrıları yaptığını ve find () 'den daha fazla regexes geçtiğini fark ettim.

find () ve children () farklı ihtiyaçları karşılar, ancak find () ve children () 'ın aynı sonucu vereceği durumlarda find () kullanmanızı öneririm.

— JR.
kaynak

4

Çocukların dom geçiş yöntemlerini kullandıkları ve bulucunun daha hızlı olan seçici api'yi kullandıkları görülüyor.

— topek

4

Sadece bir seviye yuvalama yaptığınız için oldukça dejenere test durumu. Genel durum istiyorsanız, bazı rastgele yuvalama derinlikleri ayarlamanız ve find () işlevinin çocuklardan () daha derin ağaçlardan geçtiği için performansı kontrol etmeniz gerekir.

— tvanfosson

Belirli bir tekil alt öğenin (ör. Event.target) belirli bir dom öğesinde (ör. $ ('. Navbar')) olup olmadığını kontrol ediyorsanız, $ .contains (this, event.target) çok hızlıdır (8,433,609 / saniye vs 140k en hızlı jquery araması için). jsperf.com/child-is-in-parent

— Chris Sattinger

92

İşte çalıştırabileceğiniz bir performans testine sahip bir bağlantı . find()aslında yaklaşık 2 kat daha hızlıdır children().

OSX10.7.6'da Chrome

— mactive
kaynak

$ .contains (document.getElementById ('liste'), $ ('. test') [0]) 8.433.609 / saniyedir. Belirli öğeleriniz varsa ve B'nin A'da olup olmadığını bilmek istiyorsanız, bu en iyisidir. jsperf.com/child-is-in-parent

— Chris Sattinger

Güzel test. var $test = $list.find('.test');$ Listesinin jQuery nesnesi olduğu gibi bir şey yaparsanız daha da hızlı olabileceğini unutmayın . jsperf.com/jquery-selectors-context/101

— Maciej Krawczyk

24

Bunlar mutlaka aynı sonucu vermeyecektir: find()size herhangi bir alt düğümü alırken children(), sadece eşleşen çocukları hemen alacaktır .

Bir noktada, find()sadece acil çocuklar değil, bir eşleşme olabilecek her alt düğümü aramak zorunda olduğu için çok daha yavaştı. Ancak, bu artık doğru değil; find()yerel tarayıcı yöntemleri kullanıldığından çok daha hızlıdır.

— John Feminella
kaynak

1

Diğer cevaplara göre değil haha: s. Sadece çok, çok, çok büyük bir DOM ağacınız olduğunda ..

— pgarciacamou

1

@Camou Bu cevap dört yaşında. find()o zaman çok daha yavaştı!

— John Feminella

@camou performans kısmının "Diğer cevaplara göre değil" olduğunu söylüyor. Bu cevabın ilk paragrafı doğrudur.

— Don Cheadle

14

Diğer yanıtlardan hiçbiri kullanılması durumunda ele .children()ya .find(">")karşı tek bir ana elemanın hemen çocuklar için arayın. Bu nedenle, çocukları ayırt etmek için üç farklı yol kullanarak bir jsPerf testi oluşturdum .

Olduğu gibi, ekstra ">" seçiciyi kullanırken bile .find(), hala çok daha hızlıdır .children(); benim sistemimde, 10x kadar.

Dolayısıyla, benim bakış açımdan, filtreleme mekanizmasını kullanmak için pek bir neden yok gibi görünüyor .children().

— Craig Walker
kaynak

3

Bu yorumunuz için teşekkürler! JQuery'nin sadece .chindren (x) .find (">" + x) için bir takma ad haline gelmesi gerekip gerekmediğini merak ediyorum.

— Michael Scott Cuthbert

1

Bu en uygun karşılaştırma gibi görünüyor. Teşekkürler!

— GollyJer

3

Her ikisi find()ve children()yöntemler, eşleşen öğelerin çocuğunu filtrelemek için kullanılır, ancak birincisi herhangi bir seviye aşağıya seyahat eder, ikincisi tek bir seviye aşağıya gider.

Basitleştirmek için:

find() - eşleşen elemanların çocuk, torun, büyük torun ... tüm seviyeleri aşağı arama.
children() - eşleşen öğelerin yalnızca alt öğesi (tek seviye aşağı) arasında arama yapın.

— Naresh Kumar
kaynak