Element jquery + wydajność selektora klasy

Question

Miałem nadzieję, że $('#childDiv2 .txtClass') lub $('#childDiv2 input.txtClass') będzie działać lepiej po wybraniu elementu <input type="text" id="txtID" class="txtClass"/>. Ale według tego performance analysis$('.txtClass'); jest najlepszym selektorem spośród tego. Używam JQuery 1.7.2 Czy ktoś ma wyjaśnienie tego?

HTML

<div class="childDiv2"> 
    <input type="text" id="txtID" class="txtClass"/> 
    <p class="child">Blah Blah Blah</p> 
</div>​ 

JS

$('.txtClass'); 
$('#childDiv2 .txtClass') 
$('#childDiv2 > .txtClass') 
$('input.txtClass') 
$('#childDiv2 input.txtClass') 

Answer 1

Nowoczesne przeglądarki narazić bardzo wydajne getElementsByClassName() metodę, która zwraca elementy mające daną klasę. Dlatego wybór jednej klasy jest szybszy w twoim przypadku.

Wypracowanie na swoich przykładach:

$(".txtClass")     => getElementsByClassName() 

$("#childDiv2 .txtClass")  => getElementById(), 
            then getElementsByClassName() 

$("#childDiv2 > .txtClass")  => getElementById(), 
            then iterate over children and check class 

$("input.txtClass")    => getElementsByTagName(), 
            then iterate over results and check class 

$("#childDiv2 input.txtClass") => getElementById(), 
            then getElementsByTagName(), 
            then iterate over results and check class 

Jak widać, jest to dość logiczne pierwsza forma się najszybszy na nowoczesnych przeglądarek.

Answer 2

Selektory CSS są analizowane od prawej do lewej. Tak więc Twój przykład: wykonanie dwóch czynności wymaga wykonania dwóch czynności. Najpierw znajdź wszystkie elementy z klasą txtClass. Następnie sprawdź każdy element pod kątem bycia dzieckiem elementu o identyfikatorze childDiv2.

$('.txtClass') 

Ten selektor wykona jedną czynność. Znajdź wszystkie elementy z klasą txtClass

Wystarczy popatrzeć na this article na css-tricks.com

Answer 3

var obj = document.getElementById("childDiv"); 
xxx = obj.getElementsByClassName("txtClass"); 

jest 30x szybciej.

http://jsperf.com/selectors-perf/6

Answer 4

Wygląda na to również zależy od gęstości elementów z klasą wśród elementów typu.

Uruchomiłem testy z Google Chrome w wersji 30.0.1599.69 za pomocą JQuery 1.10.1. Możesz go wypróbować w innej przeglądarce i/lub przy użyciu innej wersji JQuery.

Próbowałem uruchomić następujące testy:

1. Sparse (10% div mają klasę) link to the test on jsbin

2. Gęsty (90% div mają klasę) link to the test on jsbin

Wygląda na Gęsty przypadkówdiv.class zwycięstw, ale w Rzadki przypadek.class wygrywa.