Perché questo selettore jQuery è lento?

Question

Sulla base di test una pagina con ~ 220 elementi, di cui ~ 200 sono elementi casella di controllo, e ogni elemento deve interrogare un array con ~ 200 oggetti, sono rimasto sorpreso di scoprire che input selector:

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

è di circa 4-5 volte più veloce rispetto

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

e circa 10 volte più veloce di un checkbox selector:

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

ha anche provato il selettore universale *, che ha eseguito circa lo stesso input.

Sono curioso di capire perché una così grande differenza di prestazioni?

Answer 1

Il primo esempio è il più veloce perché riguarda solo il controllo dell'attributo id, su tutti gli elementi input.

Il selettore è equivalente a un selettore Attribute Equals:

$('input[type=checkbox]') 

Quindi, in pratica si sta facendo due selettori di attributo nel secondo esempio:

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

Ora nel tuo terzo esempio, dal momento che non si specifica un nome di tag o qualsiasi altra cosa, esso ispezionerà tutti gli elementi DOM, poiché il selettore :checkbox è equivalente a:

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

Ecco perché è sempre consigliabile precedere questo tipo di selettori con un nome di tag o qualche altro selettore.

Alla fine, il vostro terzo esempio (il più lento) è equivalente a qualcosa di simile:

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