Warum ist dieser jQuery-Selektor so langsam?

Question

Basierend auf Tests eine Seite mit ~ 220 Elementen, von denen ~ 200 Ankreuzfeld Elemente sind, und jedes Element weist eine Anordnung mit ~ 200 Einträge abzufragen, ich war überrascht, dass input selector:

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

annähernd 4-5 mal schneller als

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

und etwa 10-mal schneller als ein checkbox selector:

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

Es wurde auch der universelle Selektor * versucht, der ungefähr genauso funktionierte wie input.

Ich bin neugierig zu verstehen, warum so ein großer Unterschied in der Leistung?

Answer 1

Ihr erstes Beispiel ist das schnellere, weil es nur die Überprüfung des id Attributs auf allen input Elementen beinhaltet.

Der Selektor entspricht einen Attribute Equals Selektor:

$('input[type=checkbox]') 

Also im Grunde Sie tun zwei Attributselektoren in Ihrem zweiten Beispiel:

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

Jetzt in Ihrem dritten Beispiel, da Wenn Sie keinen Tag-Namen oder etwas anderes angeben, werden alle DOM-Elemente geprüft, da der Selektor :checkbox entspricht:

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

Deshalb wird empfohlen, dieser Art von Selektoren immer einen Tag-Namen oder einen anderen Selektor zu geben.

Am Ende Ihr drittes Beispiel (die langsamste) entspricht in etwa so:

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