jQuery .hasClass () vs .is ()

96

Gibt es eine bevorzugte Methode, um zu bestimmen, ob einem Element eine Klasse unter Leistungsgesichtspunkten zugewiesen ist?

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

oder

$('#foo').is('.bar');
jquery Omer Bokhari
quelle
6
Sie können die Leistung auf dieser Website jederzeit auch über mehrere Browser überprüfen : jsperf.com ... Dies sind einige Testfälle zum Durchsuchen: jsperf.com/browse
iwasrobbed

Antworten:

164

Aktualisieren:

Ich habe einen Test nach einem Kommentar und vier positiven Stimmen durchgeführt, um einen Kommentar abzugeben. Es stellt sich heraus, dass das, was ich gesagt hatte, die richtige Antwort ist. Hier ist das Ergebnis:

Geben Sie hier die Bildbeschreibung ein

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

Das isist Mehrzweck-, können Sie zum Beispiel tun is('.class'), is(':checked')usw. , die Mittel ishat , mehr zu tun , wo ist hasClassbeschränkt, die nur prüfen , ob eine Klasse zu sein Set oder nicht.

Daher hasClasssollte es schneller sein, wenn Leistung auf einem beliebigen Niveau Ihre Priorität ist.

Sarfraz
quelle
7
Haben Sie den Beweis, dass es schneller ist? Nur weil eine Funktion weniger Funktionalität hat, heißt das NICHT, dass sie automatisch schneller ist.
Kris
15
@Kris: Ja, das tue ich: jsperf.com/hasclass-vs-is-so . Wie gesagt, hasClass ist viel schneller.
Sarfraz
4
'viel schneller' => 'viel schneller'
Kirk Strobeck
@SgtPooki, ich habe nur um Beweise gebeten; Wenn es wahr wäre, wollte ich wissen warum. Ich bin so neugierig :). Sie können problemlos mehr Funktionen haben und diese schneller ausführen. es kommt immer auf die umsetzung an. Ihre 99% sind eine umfassende Verallgemeinerung und nicht unbedingt der wahre Stand der Softwareentwicklung. Ihre Frage zu "Wird jQuery jemals so schnell sein wie reines JavaScript? Eine andere Antwort als Nein ist falsch." ist keine gute Frage; jQuery verfügt tatsächlich über viele Optimierungen, die einen schnelleren Zugriff auf DOM-Elemente ermöglichen, sobald Daten zwischengespeichert werden. es hängt wirklich von Ihrer spezifischen Verwendung ab.
Kris
1
@SgtPooki so weit wie möglich werfen Sie einen Blick auf die Sizzle Selector Engine; Wie ich weiterhin erwähne, hängt es von der Implementierung ab und in älteren Browsern, die keine nativen Abfragen unterstützen, wird es durch die Implementierung von jQuery höchstwahrscheinlich schneller sein, da es keine native Version gibt (standardmäßig Win). Wenn Sie weiterhin dieselben DOM-Elemente abrufen, kann es je nach Browser und Version zusätzliche Zeit dauern, bis jQuery dieses Element für einen schnelleren Abruf zwischenspeichern kann. In der Regel sind native JavaScript-Funktionen schneller. Dies hängt jedoch von der Unterstützung und Implementierung des Browsers ab.
Kris
13

Da ises allgemeiner ist als hasClassund verwendet filter, um den bereitgestellten Ausdruck zu verarbeiten, scheint es wahrscheinlich, dass dies hasClassschneller ist.

Ich habe den folgenden Code über die Firebug-Konsole ausgeführt:

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();

Ich habe:

  • usingIs: 3191.663ms
  • usingHas: 2362,523 ms

Kein großer Unterschied, kann aber relevant sein, wenn Sie viele Tests durchführen.

BEARBEITEN, wenn ich sage 'kein großer Unterschied, mein Punkt ist, dass Sie 10000 Zyklen machen müssen, um 0,8s eines Unterschieds zu sehen. Es würde mich überraschen, eine Webanwendung zu sehen, bei der ein Wechsel von iszu hasClasszu einer deutlichen Verbesserung der Gesamtleistung führt. Ich gebe jedoch zu, dass dies eine Geschwindigkeitsverbesserung von 35% ist.

Dancrumb
quelle
9

Beide sollten in Bezug auf die Leistung ziemlich nahe beieinander liegen, $('#foo').hasClass('bar');scheinen mir jedoch lesbarer und semantisch korrekter zu sein.

Darin Dimitrov
quelle
7

.hasClassist viel schneller als .is Sie es von hier aus testen können . Ändern Sie den Testfall nach Ihren Wünschen.

Gaurav
quelle