jQuery .hasClass () vs .is ()

96

existe um método preferido para determinar se um elemento é atribuído a uma classe, do ponto de vista de desempenho?

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

ou

$('#foo').is('.bar');
jquery Omer Bokhari
fonte
6
Você sempre pode validar o desempenho neste site, bem como em vários navegadores: jsperf.com ... Estes são alguns casos de teste para navegar: jsperf.com/browse
iwasrobbed

Respostas:

164

Atualizar:

Eu cometi um teste após um comentário e quatro votos positivos para o próprio comentário. Acontece que o que eu disse é a resposta correta. Aqui está o resultado:

insira a descrição da imagem aqui

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

O isé multiuso, você pode, por exemplo is('.class'), fazer is(':checked'), etc, o que significa que istem mais a fazer onde estáhasClass é limitado, que só verifica se uma classe está definida ou não.

Portanto, hasClassdeve ser mais rápido se o desempenho em qualquer nível for sua prioridade.

Sarfraz
fonte
7
Você tem provas de que é mais rápido? Só porque uma função tem menos funcionalidade, NÃO significa que ela é automaticamente mais rápida.
Kris
15
@Kris: Sim, eu: jsperf.com/hasclass-vs-is-so . Como eu disse, hasClass é bem mais rápido.
Sarfraz
4
'muito mais rápido' => 'muito mais rápido'
Kirk Strobeck,
@SgtPooki, eu estava simplesmente pedindo uma prova; se fosse verdade, eu queria saber por quê. Eu sou curioso assim :). Você pode facilmente ter mais funcionalidade e torná-la mais rápida; sempre depende da implementação. Seus 99% é uma generalização abrangente e não necessariamente o verdadeiro estado do desenvolvimento de software. Sua pergunta: "O jQuery será tão rápido quanto o JavaScript puro? Uma resposta diferente de não está errada." não é uma boa pergunta; Na verdade, o jQuery tem muitas otimizações nas quais fornecerá acesso mais rápido aos elementos DOM assim que os dados forem armazenados em cache; realmente depende do seu uso específico.
Kris
1
@SgtPooki tão rápido quanto mais rápido, dê uma olhada no motor do seletor de chiado; como continuo a mencionar que depende da implementação e em navegadores mais antigos que não suportam consultas nativamente, provavelmente será mais rápido por meio da implementação do jQuery, pois não há versão nativa (win por padrão). Além disso, se você continuar a chamar os mesmos elementos DOM, dependendo do navegador e da versão, pode levar mais tempo, pois o jQuery pode armazenar em cache este elemento para uma recuperação mais rápida. Normalmente, as funções nativas do JavaScript serão mais rápidas; mas depende do suporte e da implementação do navegador.
Kris
13

Uma vez que isé mais genérico do que hasClasse usa filterpara processar a expressão fornecida, parece provável quehasClass seja mais rápido.

Executei o seguinte código no console do 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();

Eu tenho:

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

Não é uma grande diferença, mas pode ser relevante se você estiver fazendo muito testes.

EDIT quando eu digo 'não é uma grande diferença, meu ponto é que você precisa fazer 10.000 ciclos para ver 0,8s de diferença. Eu ficaria surpreso em ver um aplicativo da web em que mudar de ispara hasClassveria uma melhoria significativa no desempenho geral. No entanto, admito que se trata de uma melhoria de 35% na velocidade.

Dancrumb
fonte
9

Ambos devem ser muito próximos em termos de desempenho, mas $('#foo').hasClass('bar');parecem mais legíveis e semanticamente corretos para mim.

Darin Dimitrov
fonte
7

.hasClassé muito mais rápido do que .is você pode testá-lo aqui . Altere o caso de teste de acordo com você.

Gaurav
fonte