jQuery .hasClass () frente a .is ()

96

¿Existe un método preferido para determinar si a un elemento se le asigna una clase, desde el punto de vista del desempeño?

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

o

$('#foo').is('.bar');
jquery Omer Bokhari
fuente
6
Siempre puede validar el rendimiento en este sitio y en varios navegadores: jsperf.com ... Estos son algunos casos de prueba para explorar: jsperf.com/browse
iwasrobbed

Respuestas:

164

Actualizar:

Cometí una prueba después de un comentario y cuatro votos a favor para cada comentario. Resulta que lo que dije es la respuesta correcta. Aquí está el resultado:

ingrese la descripción de la imagen aquí

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

El ises multipropósito, por ejemplo, puede hacerlo is('.class'), is(':checked')etc., lo que significa que istiene más que ver donde hasClassestá limitado, lo que solo verifica si una clase está configurada o no.

Por lo tanto, hasClassdebería ser más rápido si el rendimiento en cualquier nivel es su prioridad.

Sarfraz
fuente
7
¿Tienes pruebas de que es más rápido? El hecho de que una función tenga menos funcionalidad NO significa que sea automáticamente más rápida.
Kris
15
@Kris: Sí, lo hago: jsperf.com/hasclass-vs-is-so . Como dije, hasClass es mucho más rápido.
Sarfraz
4
'mucho más rápido' => 'mucho más rápido'
Kirk Strobeck
@SgtPooki, simplemente estaba pidiendo una prueba; si era cierto, quería saber por qué. Soy curioso así :). Puede tener fácilmente más funcionalidad y hacer que sea más rápido; siempre depende de la implementación. Su 99% es una gran generalización y no necesariamente el verdadero estado del desarrollo de software. Su pregunta de "¿Será jQuery alguna vez tan rápido como JavaScript? Una respuesta distinta a no es incorrecta". no es una buena pregunta; jQuery en realidad tiene muchas optimizaciones que proporcionarán un acceso más rápido a los elementos DOM una vez que los datos se almacenan en caché; realmente depende de su uso específico.
Kris
1
@SgtPooki en cuanto a velocidad, eche un vistazo al motor selector de chispas; como sigo mencionando, depende de la implementación y en los navegadores más antiguos que no admiten consultas de forma nativa, lo más probable es que sea más rápido a través de la implementación de jQuery ya que no hay una versión nativa (win por defecto). Además, si continúa recordando los mismos elementos DOM, según el navegador y la versión, puede llevar más tiempo, ya que jQuery puede almacenar en caché este elemento para una recuperación más rápida. Normalmente, las funciones nativas de JavaScript serán más rápidas; pero depende del soporte y la implementación del navegador.
Kris
13

Dado que ises más genérico que hasClassy se utiliza filterpara procesar la expresión proporcionada, parece probable que hasClasssea ​​más rápido.

Ejecuté el siguiente código desde la consola de 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();

Tengo:

  • usandoIs: 3191.663ms
  • usingHas: 2362.523ms

No es una gran diferencia, pero puede ser relevante si está realizando muchas pruebas.

EDITAR cuando digo 'no es una gran diferencia, mi punto es que necesitas hacer 10000 ciclos para ver 0.8s de diferencia. Me sorprendería ver una aplicación web en la que cambiar de isa hasClassvería una mejora significativa en el rendimiento general. Sin embargo, reconozco que se trata de una mejora del 35% en la velocidad.

Dancrumb
fuente
9

Ambos deberían ser bastante similares en términos de rendimiento, pero me $('#foo').hasClass('bar');parecen más legibles y semánticamente correctos.

Darin Dimitrov
fuente
7

.hasClasses mucho más rápido de lo que .is puedes probar desde aquí . Cambie el caso de prueba según usted.

Gaurav
fuente