jQuery .hasClass () contro .is ()

96

esiste un metodo preferito per determinare se a un elemento è assegnata una classe, dal punto di vista delle prestazioni?

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

o

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

jquery

— Omer Bokhari
fonte

6

Puoi sempre convalidare le prestazioni su questo sito e su più browser: jsperf.com ... Questi sono alcuni casi di test da esplorare: jsperf.com/browse

— iwasrobbed

164

Aggiornare:

Ho impegnato un test a seguito di un commento e quattro voti positivi per commentare molto. Si scopre che quello che avevo detto è la risposta corretta. Ecco il risultato:

inserisci qui la descrizione dell'immagine

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

Il isè polivalente, si può per esempio fare is('.class'), is(':checked'), ecc, che mezzi isha più a che fare , dove si hasClassè limitata, che controlla solo per un essere insieme di classe o meno.

Quindi, hasClassdovrebbe essere più veloce se le prestazioni a qualsiasi livello sono la tua priorità.

— Sarfraz
fonte

7

Hai la prova che è più veloce? Solo perché una funzione ha meno funzionalità NON significa che sia automaticamente più veloce.

— Kris

15

@Kris: Sì, lo faccio: jsperf.com/hasclass-vs-is-so . Come ho detto, hasClass è molto più veloce.

— Sarfraz

4

'molto più veloce' => 'molto più veloce'

— Kirk Strobeck

@SgtPooki, stavo semplicemente chiedendo una prova; se era vero volevo sapere perché. Sono così curioso :). Puoi facilmente avere più funzionalità e renderlo più veloce; dipende sempre dall'implementazione. Il tuo 99% è una generalizzazione radicale e non necessariamente il vero stato dello sviluppo del software. La tua domanda "jQuery sarà mai veloce come un semplice JavaScript? Una risposta diversa da no è sbagliata". non è una buona domanda; jQuery ha in realtà molte ottimizzazioni in cui fornirà un accesso più rapido agli elementi DOM una volta che i dati sono stati memorizzati nella cache; dipende davvero dal tuo utilizzo specifico.

— Kris

1

@SgtPooki per quanto più veloce dai un'occhiata al motore di selezione sfrigolio; come continuo a menzionare, dipende dall'implementazione e nei browser meno recenti che non supportano nativamente le query, molto probabilmente sarà più veloce attraverso l'implementazione di jQuery poiché non esiste una versione nativa (win per impostazione predefinita). Inoltre, se continui a richiamare gli stessi elementi DOM, a seconda del browser e della versione, potrebbe essere necessario più tempo in quanto jQuery può memorizzare nella cache questo elemento per un recupero più rapido. In genere le funzioni JavaScript native saranno più veloci; ma dipende dal supporto e dall'implementazione del browser.

— Kris

13

Poiché isè più generico di hasClasse utilizza filterper elaborare l'espressione fornita, sembra probabile che hasClasssia più veloce.

Ho eseguito il seguente codice dalla console 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();

Ho ottenuto:

usingIs: 3191.663ms
usingHas: 2362.523ms

Non è una grande differenza, ma potrebbe essere rilevante se stai facendo molti test.

MODIFICA quando dico 'non una differenza enorme, il mio punto è che devi fare 10000 cicli per vedere 0,8s di differenza. Sarei sorpreso di vedere un'applicazione web tale che il passaggio da isa hasClassvedrebbe un miglioramento significativo delle prestazioni complessive. Tuttavia, ammetto che questo è un miglioramento del 35% della velocità.

— Dancrumb
fonte

9

Entrambi dovrebbero essere abbastanza vicini in termini di prestazioni, ma mi $('#foo').hasClass('bar');sembrano più leggibili e semanticamente corretti.

— Darin Dimitrov
fonte

7

.hasClassè molto più veloce di .is Puoi provarlo da qui . Cambia il caso di test secondo te.

— Gaurav
fonte