Самые эффективные селекторы jQuery

Question

Какой из следующих селекторов наиболее эффективен в jQuery?Или есть какая-то реальная разница?

1. input[type=text]
2. [type=text]
3. input:text
4. :text

Конечно, селектор идентификатора на элементе будет лучше, потому что интерпретатор может использовать getElementById(), но я пытаюсь понять общие различия в вышеупомянутых селекторах.

Answer 1

Вот быстрый контрольный пример , который я настроил (обратите внимание, что я добавил необходимые кавычки вокруг селекторов имен атрибутов).Похоже, что первый метод самый быстрый, что на самом деле ожидается (потому что другие подразумевают универсальный селектор *), за которым следует [type='text'], а на последнем месте - :text.

В действительности,разница настолько минимальна, что на самом деле не имеет значения, какой вы выберете.

Вот снимок экрана (правка - я добавил в 4-м методе после просмотра обновления вопроса):

Answer 2

Разбивка:

input[type=text]
// and
[type=text]

Оба селектора атрибутов .Первый из них быстрее, потому что поиск атрибута уже сужен до элементов ввода.

input:text
:text

Являются расширениями jQuery.Из документов : text selector :

Поскольку: текст является расширением jQuery и не является частью спецификации CSS, запросы с использованием текста не могут воспользоваться преимуществами повышения производительности, обеспечиваемымисобственный метод DOM querySelectorAll ().Для повышения производительности в современных браузерах используйте вместо этого [type = "text"].

Таким образом, эти селекторы медленнее (в то время как сужение его до элементов ввода будет и здесь быстрее).