Pourquoi ce sélecteur jQuery est-il si lent?

Question

Basé sur le test d'une page avec ~ 220 éléments, dont ~ 200 sont des éléments de cases à cocher, et chaque élément doit interroger un tableau avec ~ 200 articles, je fus surpris de découvrir que input selector:

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

est d'environ 4-5 fois plus rapide que

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

et environ 10 fois plus rapide qu'un checkbox selector:

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

Également essayé le sélecteur universel *, qui a effectué à peu près le même que input.

Je suis curieux de comprendre pourquoi une telle différence de performance?

Answer 1

Votre premier exemple est le plus rapide car il implique uniquement la vérification de l'attribut id, sur tous les éléments input.

Le sélecteur équivaut à un sélecteur Attribute Equals:

$('input[type=checkbox]') 

Donc, fondamentalement, vous faites deux sélecteurs d'attributs dans votre deuxième exemple:

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

Maintenant, dans votre troisième exemple, étant donné que vous ne spécifiez pas de nom de tag ou quoi que ce soit d'autre, il inspectera tous les éléments DOM, puisque le sélecteur :checkbox est équivalent à:

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

C'est pourquoi il est toujours recommandé de précéder ce type de sélecteurs avec un nom de tag ou un autre sélecteur.

A la fin, votre troisième exemple (le plus lent) équivaut à quelque chose comme ceci:

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