JQuery alt öğelerini seçmek için en hızlı yöntem nedir?

SORU

5 Temmuz 2010, PAZARTESİ

JQuery alt öğelerini seçmek için en hızlı yöntem nedir?

Bildiğim kadarıyla biliyorum, alt öğeleri seçerken yolları vardırbir WordPress kullanmak.

//Store parent in a variable  
var $parent = $("#parent");

Yöntem 1(bir kapsamı kullanarak)

$(".child", $parent).show();

Yöntem 2(bul() yöntemi)

$parent.find(".child").show();

Yöntem 3(Hemen çocuklar için sadece)

$parent.children(".child").show();

Yöntem 4(CSS seçici ile)- önerdiği @spinon

$("#parent > .child").show();

Yöntem 5(aynıYöntem 2)- @göre Kai

$("#parent .child").show();

Ne söyleyeceklerini görmek isterim o yüzden tek başıma bu araştırmayı yapabilmek için profil oluşturma aşina değilim.

P. S. ben bu this question olası bir çift, ama tüm yöntemleri kapsar anlamıyor.

CEVAP

5 Temmuz 2010, PAZARTESİ

Yöntem 1veyöntem 2aynıdır tek fark buyöntem 1kapsam ayrıştırmak gerekiyor geçirilen ve $parent.find(".child").show(); bir ara çevirmek.

Yöntem 4veYöntem 5seçici ayrıştırma ve sadece çağırmak için ikisi de lazım: $('#parent').children().filter('.child') $('#parent').filter('.child') sırasıyla.

Bu yüzdenyöntem 3hep çalışmak, en az miktarda yapmak gerekir, çünkü en hızlı ve ilk seviye çocuklar için en kestirme yöntemi kullanır.

Anurag yeniden hız testleri burada: http://jsfiddle.net/QLV9y/1/

Hız testi: (Daha İyidir)

Krom, 3 en iyi yöntem 1/2 ve sonra 4/5 yöntemi

alt text

Firefox, 3 hala en iyi yöntem 1/2 ve sonra 4/5 yöntemi

alt text

Opera, 3 hala en iyi yöntem 4/5 ve sonra 1/2 yöntemi

alt text

YANİ 8diğer tarayıcılara göre daha yavaş genel olsa da , hala 3, 1,2,4,5 sıralama Yöntemini izler.

alt text

Genel olarak,yöntem 3bu tüm en iyi yöntem olarak kullanmak denir, doğrudan ve gerekmez traverse birden fazla düzeyde alt öğeleri farklı yöntem 1/2 ve yok olmaya ayrıştırılmış gibi yöntem 4/5

Ama, bu hiç de göründüğü Yöntem 5 olarak portakal elma karşılaştırma olduğumuzu unutmayın birinci düzey olanlar yerine çocuklar.

Bunu Paylaş: