Soru jQuery: $ ('# id etiketi') vs $ ('# id'), bulmak ('tag') - hangisi tercih edilir?


Özellikle hızları açısından hangi seçeneğin daha iyi olduğunu bilmek istiyorum:

$('#id tag')...

veya

$('#id').find('tag')...

Ayrıca, eğer değiştirirseniz aynı cevap geçerli olur id ve / veya tag diyelim ki class ya da benzeri input:checked?

Örneğin, hangisi daha iyi: $('#id input:checked')... veya $('#id').find('input:checked');?


18
2017-07-16 10:34


Menşei


bir test vakası çalıştırmayı deneyin jsperf.com - Ravi Gadag
Evet, çok az çalışıyorum. Sorun şu ki, teorik cevabı bilmek istiyorum ve sadece belirli test koşullarına uygulanabilecek sonuçları almak istemiyorum. - Nick
üçüncü seçenek de var: $("tag", "#id"); Performans testi yapacağınız zaman, üçünü de denediğinizden emin olun. - Robert Koritnik
@ravi jsperf tamam, buf tarayıcılar arasında farklı bir sonuç var - Royi Namir
Cevap gerçekten hangi tarayıcıdan bahsettiğine bağlı. Örneğin, destekleyen bir tarayıcı arasında büyük bir fark olacaktır. querySelectorAll ve olmayan bir tane. - James Allardice


Cevaplar:


Kararınızı 3 şeye dayandırabilirsiniz:

Okunabilirlik

Bu, verilen iki seçicinizle pek bir fark yaratmıyor. Benim için tercih ederim $('#id').find('inner') sözdizimi çünkü aslında ne yaptığını daha doğru bir şekilde açıklıyor.

Tekrar Kullanılabilirlik

Kodunuzun başka bölümleri varsa, aynı kimlik seçiciyi (veya içeriğindeki bir şeyi) kullanırsanız, seçiciyi önbelleğe alabilir ve yeniden kullanabilirsiniz. Kendimi böyle yazılan kodu yeniden düzenlemeyi zor buluyorum. $('#id inner')çünkü css seçiciyi önce çözmek ve olası gelişmeleri bulmak için önce çözmeniz gerekir.

Bu iki vakayı çok karmaşık bir şekilde düşünün

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

Ve diğer dava

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

Sanırım ikinci örnek, «kimliğini önbelleğe al» »diye bağırıyor, ve ilk değil.

hız

Performans her zaman iyi bir nokta ve bu durumda, kimlik seçici find çoğu tarayıcıda daha iyi bir iş yapar, çünkü ilk önce içeriği belirler ve azalan seçiciyi daha küçük bir öğe kümesine uygulayabilir.

JQuery'deki context-vs alt küme seçicileri performansı hakkında daha fazla bilgi edinmek isterseniz, iyi bir performans testi.. Kimlikleri alt kümeleri genellikle kural. Elbette farklı sonuçlar elde edebilirsiniz, ancak çoğu durumda, yaparlar.

Yani, benim altımdaki seçkinler için 3 ile 0 arasında.


15
2017-07-16 11:22





İşte hepsi için baktığım test örneği HTML span altındaki öğeler #i öğe:

<div id="i">
  <span>testL1_1</span>
  <span>testL1_2</span>
  <div>
    <span>testL2_1</span>
  </div>
  <ul>
    <li>
      <span>testL3_1</span>
    </li>
  </ul>
  <div>
    <div>
      <div>
        <div>
          <span>testL5_1</span>
        </div>
      </div>
    </div>
  </div>
</div>

Bu üç jQuery seçiciyi test etme:

$("#i span");         // much slower
$("#i").find("span"); // FASTEST
$("span", "#i");      // second fastest

http://jsperf.com/jquery-sub-element-selection

Google Chrome ve Firefox’ta çalıştırıyorum. .find() En hızlı üçüncü dava ve onu takip eden en yavaş olanıdır.

jQuery selector performance


5
2017-07-16 10:45





Burada performans ölçüsü: :)==>  http://jsperf.com/find-vs-descendant-selector

Gibi görünüyor descendant Yol daha hızlıdır, ancak operada kötü performans gösterir.

benim görüşüme göre anyhoo :)

Umarım bu soruya cevap verir ve burada görürsünüz. .Find () temel descendant seçme yönteminden daha mı hızlı?


2
2017-07-16 10:39



Bunun için teşekkürler. Aslında, Paul Irish'ın “dersi” nin sorusunu yönlendiren bir yarım hatırlama oldu; JQuery motorunun bunları farklı şekilde işlediğini hatırladım. Daha dolgun bir açıklama umuyordum :) - Nick
Onu bir daha gördüğünde Paul'e merhaba de. :P @Nick Sevindim ki performansınızı kendi başınıza test etmenizi öneririm, bellek sızıntılarına bakarsanız daha ilginç olur :P evet ML kelimesini söyledim :) bruv! - Tats_innit
İtiraf ediyorum, bellek sızıntılarını nasıl arayacağımı bilmiyorum :( Ama Paul'e merhaba diyeceğim ... - Nick
@Nick bu bruv'u okudu - blog.linkibol.com/2010/05/07/...  *lütfen aklınızda bulundurun Bu eski blog ve "bizim" fav tarayıcı I.E. :) - Tats_innit
Şerefe, bunu yapacağım. - Nick


Descendant daha iyi performans gösterir. bu bağlantıyı kontrol et Jsperf .

  1. çok fazla iç içe elemanınız varsa. sonra bulmak için gidin. Bu gerçekten küçük bir fark.
  2. Bu sadece kodlama şeklinizdir. çok fazla iç içe geçmiş eşya var mı tercih ederim, o zaman bulmaya gideceğim

1
2017-07-16 10:42



Testinizdeki problem, sadece ID'yi aramamanız ve zamanın çoğunun CSS'yi manipüle etmek için harcanmasıdır. Küçük fark bunu yansıtır. Performans sonuçlarımı ortadan kaldırıldıklarında kontrol et ve çok farklı sonuçlar göster. 3 kez sırayla fark. - Robert Koritnik


dediğim gibi - tarayıcılarda farklı.

krom:

http://i.stack.imgur.com/SijQY.jpg enter image description here

yani

http://i.stack.imgur.com/axhGw.jpg enter image description here


1
2017-07-16 10:42





İlk olana benziyor. $("#id tag") olduğu çok saniyeden daha yavaş ($("#id").find("tag")) modern tarayıcılarda; burada test et, aşağıdaki ekran görüntüsüne bakın. IE7 (yoksun querySelectorAll) yaklaşık olarak aynı hızda çalışır.

Ama iki gözlem:

  1. Aslında önemi çok düşük. Gerçek, bilinen bir performans sorununu ayıklamıyorsanız, endişelenmeyin.

  2. Sentetik kriterler daima şüphelidir. Gerçek, bilinen bir performans sorunuyla savaşıyorsanız, profil o (gerçek seçiciniz ve gerçek işaretiniz).

Results screenshot


1
2017-07-16 10:44



İlginç. İkisinin de sahnelerin ardında aynı işleve ertelendiğini düşünürdüm. - Utkanos