jQuery .hasClass () kontra .is ()

96

czy istnieje preferowana metoda określania, czy element ma przypisaną klasę, z punktu widzenia wydajności?

$('#foo').hasClass('bar');

lub

$('#foo').is('.bar');

jquery

— Omer Bokhari
źródło

6

Zawsze możesz sprawdzić wydajność na tej stronie, a także w wielu przeglądarkach: jsperf.com ... Oto kilka przypadków testowych do przejrzenia: jsperf.com/browse

— iwasrobbed

164

Aktualizacja:

Popełniłem test po komentarzu i czterech pozytywnych głosach za bardzo komentarz. Okazuje się, że to, co powiedziałem, jest poprawną odpowiedzią. Oto wynik:

wprowadź opis obrazu tutaj

http://jsperf.com/hasclass-vs-is-so

isJest wielofunkcyjny, można na przykład zrobić is('.class'), is(':checked')itp, które środki isma więcej do zrobienia , gdzie jest hasClassograniczona, który sprawdza tylko bytem zestaw klasy, czy nie.

Dlatego hasClasspowinno być szybsze, jeśli priorytetem jest wydajność na jakimkolwiek poziomie.

— Sarfraz
źródło

7

Czy masz dowód, że jest szybszy? To, że funkcja ma mniejszą funkcjonalność, NIE oznacza, że jest automatycznie szybsza.

— Kris

15

@Kris: Tak, tak: jsperf.com/hasclass-vs-is-so . Jak powiedziałem, hasClass jest dużo szybszy.

— Sarfraz

4

„dużo szybciej” => „dużo szybciej”

— Kirk Strobeck

@SgtPooki, po prostu prosiłem o dowód; jeśli to prawda, chciałem wiedzieć, dlaczego. Jestem taki dociekliwy :). Możesz łatwo mieć większą funkcjonalność i szybciej; zawsze zależy od implementacji. Twoje 99% to szerokie uogólnienie i niekoniecznie prawdziwy stan rozwoju oprogramowania. Twoje pytanie „Czy jQuery będzie kiedykolwiek tak szybkie jak zwykły JavaScript? Odpowiedź inna niż nie jest błędna”. to nie jest dobre pytanie; jQuery faktycznie ma wiele optymalizacji, które zapewnią szybszy dostęp do elementów DOM po zbuforowaniu danych; to naprawdę zależy od konkretnego zastosowania.

— Kris

1

@SgtPooki o ile szybciej spójrz na silnik selektora sizzle; jak nadal wspominam, zależy to od implementacji, aw starszych przeglądarkach, które nie obsługują natywnie zapytań, najprawdopodobniej będzie szybsze dzięki implementacji jQuery, ponieważ nie ma wersji natywnej (domyślnie wygrana). Ponadto, jeśli kontynuujesz przywoływanie tych samych elementów DOM, w zależności od przeglądarki i wersji, może to zająć więcej czasu, ponieważ jQuery może buforować ten element w celu szybszego pobierania. Zwykle natywne funkcje JavaScript będą działać szybciej; ale zależy to od obsługi i implementacji przeglądarki.

— Kris

13

Ponieważ isjest bardziej ogólny niż hasClassi używa filterdo przetwarzania podanego wyrażenia, wydaje się prawdopodobne, że hasClassjest szybszy.

Uruchomiłem następujący kod z konsoli Firebug:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

Mam:

usingIs: 3191.663ms
usingHas: 2362,523ms

Nie jest to duża różnica, ale może być istotna, jeśli wykonujesz dużo testów.

EDYTUJ, kiedy mówię `` nie jest to wielka różnica, chodzi mi o to, że musisz zrobić 10000 cykli, aby zobaczyć 0,8 sekundy różnicy. Zdziwiłbym się, widząc aplikację internetową, w której przełączenie się z na isdo hasClassspowodowałoby znaczną poprawę ogólnej wydajności. Jednak przyznaję, że jest to 35% poprawa szybkości.

— Dancrumb
źródło

9

Oba powinny być dość zbliżone pod względem wydajności, ale $('#foo').hasClass('bar');wydają mi się bardziej czytelne i poprawne semantycznie.

— Darin Dimitrov
źródło

7

.hasClassjest znacznie szybszy niż .is możesz go przetestować tutaj . Zmień przypadek testowy według siebie.

— Gaurav
źródło