¿Por qué este selector jQuery es tan lento?

Question

basados ​​en pruebas de una página con ~ 220 elementos, de los cuales ~ 200 son elementos de casillas de verificación, y cada elemento tiene que consultar una matriz con ~ 200 elementos, me sorprendió al descubrir que input selector:

$("input[id$='" + code + "']").each(function() { //... 

es aproximadamente 4-5 veces más rápido que

$("input:checkbox[id$='" + code + "']").each(function() { //... 

y aproximadamente 10 veces más rápido que un checkbox selector:

$(":checkbox[id$='" + code + "']").each(function() { //... 

También probó el selector universal *, que realizó aproximadamente lo mismo que input.

Tengo curiosidad por entender por qué una gran diferencia en el rendimiento?

Answer 1

Su primer ejemplo es el más rápido porque solo implica el control del atributo id, en todos los elementos input.

El selector es equivalente a un Attribute Equals selector:

$('input[type=checkbox]') 

Así que, básicamente, que está haciendo dos selectores de atributos en el segundo ejemplo:

$("input[type=checkbox][id$='" + code + "']").each(function() { //... 

En su tercer ejemplo, ya no especifica un nombre de etiqueta ni nada, inspeccionará todos los elementos DOM, ya que el selector :checkbox es equivalente a:

$("*:checkbox")//... 

Por eso siempre se recomienda preceder este tipo de selectores con un nombre de etiqueta o algún otro selector.

Al final, su tercer ejemplo (el más lento) es equivalente a algo como esto:

$("[type=checkbox][id$='" + code + "']").each(function() { //...