Почему этот селектор jQuery такой медленный?

Question

Основываясь на тестировании страницы с ~ 220 элементами, из которых ~ 200 являются элементами-флажками, и каждый элемент должен запрашивать массив с ~ 200 элементами, я с удивлением обнаружил, что селектор ввода :

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

примерно в 4-5 раз быстрее, чем

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

, и примерно в 10 раз быстрее, чем переключатель флажка :

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

Также попробовал универсальный селектор *, который работал примерно так же, как input.

Мне любопытно понять, почему такая большая разница в производительности?

Answer 1

Ваш первый пример быстрее, поскольку он включает только проверку атрибута id на всех элементах input.

Селектор input:checkbox эквивалентен селектору , равному :

$('input[type=checkbox]')

Итак, вы делаете два селектора атрибутов во втором примере:

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

Теперь в третьем примере, поскольку вы не указываете имя тега или что-либо еще, он будет проверять все элементы DOM, поскольку селектор :checkbox эквивалентен:

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

Именно поэтому всегда рекомендуется ставить этот тип селекторов перед именем тега или каким-либо другим селектором.

В конце ваш третий пример (самый медленный) эквивалентен примерно так:

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