Почему этот селектор jQuery является настолько медленным?
На основе тестирования страницы с ~220 элементами, из которых ~200 элементы флажка, и каждый элемент должен запросить массив с ~200 объектами, я был удивлен обнаружить, что вводит селектор:
$("input[id$='" + code + "']").each(function() { //...
приблизительно в 4-5 раз быстрее, чем
$("input:checkbox[id$='" + code + "']").each(function() { //...
и приблизительно в 10 раз быстрее, чем селектор флажка:
$(":checkbox[id$='" + code + "']").each(function() { //...
Также испытанный универсальный селектор *, который работал о том же как input.
Мне любопытно понять почему такая большая разница в производительности?
1 ответ
Ваш первый пример более быстрый, потому что он включает только проверку атрибута id на всех входах элементов.
Селектор input: checkbox эквивалентен селектору Attribute Equals :
$('input[type=checkbox]')
Таким образом, во втором примере вы выполняете два селектора атрибутов :
$("input[type=checkbox][id$='" + code + "']").each(function() { //...
Теперь в вашем третьем примере, поскольку вы не указываете имя тега или что-то еще, он будет проверять все элементы DOM, поскольку селектор : checkbox эквивалентен:
$("*:checkbox")//...
Вот почему всегда рекомендуется ставить перед селекторами такого типа имя тега или какой-либо другой селектор.
В конце ваш третий пример (самый медленный) эквивалентен примерно так:
$("[type=checkbox][id$='" + code + "']").each(function() { //...