Улучшение производительности селекторов с помощью jQuery

Я просмотрел некоторые сайты, и все они говорят об использовании селекторов тегов вместо классов для повышения производительности.

Например, это:

$("input.myclass");

Вместо этого:

$(".myclass");

Например:

Все они утверждали, что в JavaScript есть только getElementById и getElementsbyTagName, а не способ прямого выбора классов.

Изменилось ли это за последние 3 года? Теперь они могут выбирать по классам? Я тестировал его с помощью jsperf, и кажется, что селектор классов намного быстрее: http://jsperf.com/class-vs-input

Я также посмотрел на тесты других людей и показал те же результаты: http://jsperf.com/selectors-perf/3

Изменилось ли это за последний год? Должны ли мы теперь выбирать по классу, а не по тегам? Где я могу взглянуть на версии браузеров, изначально реализующих селектор классов?

Спасибо.


javascript jquery performance query-performance
person Alvaro    schedule 17.06.2013    source источник
comment
Ваш первый jsperf совершенно не связан. Эти селекторы вообще не сопоставимы. Селекторы, которые вы должны были использовать, были $(".demo") и $("input.demo"). :checkbox является псевдоселектором jQuery и неэффективен. Во всяком случае, вы должны были использовать [type="checkbox"]. Помимо эффективности, я думаю, что при этом важно учитывать, что иногда вам не нужны все элементы определенного класса, вам нужны только те, которые удовлетворяют определенному условию (например, внутри раздел)   -  person Ian    schedule 17.06.2013
comment
Я думаю, вы должны взглянуть на это, если считаете, что input.class лучше, чем .class.. jsperf.com/jquery-standards-over-qualified-selectors/2 Пожалуйста, имейте в виду, что поиск выполняется справа налево, и поэтому вы только переоцените его, если используете input и .class вместе :)   -  person krishwader    schedule 17.06.2013
comment
@passionateCoder Я не думаю, что это быстрее, я спрашиваю, изменилось ли это за последние несколько лет, потому что в прошлом люди говорили об обратном.   -  person Alvaro    schedule 17.06.2013
comment
@Ian, спасибо за информацию, но, тем не менее, селектор классов по-прежнему быстрее по сравнению с классом внутри селектора тегов по сравнению со ссылками, которые я разместил?   -  person Alvaro    schedule 17.06.2013
comment
@Steve Нет, я понимаю, я просто пытался указать, что первый jsperf был не совсем честным. Ваш второй jsperf (и jsperf другого комментатора) имеет больше смысла и определенно показывает, что простые селекторы работают быстрее. Я думаю, что за последние несколько лет использование Sizzle (механизм селекторов, который время от времени использует jQuery) сократилось в пользу нативных методов DOM. Sizzle несколько неэффективен (но очень надежен и последователен), поэтому он мог бы работать лучше для поиска в старых браузерах, и у вас не было бы такой разницы между .test и input.test.   -  person Ian    schedule 17.06.2013
comment
@ Ян еще раз спасибо за разъяснение. Я ценю его.   -  person Alvaro    schedule 17.06.2013

Ответы (1)


arrow_upward
2
arrow_downward

Сейчас это изменилось.

Большинство браузеров реализуют:

var matches = document.body.querySelectorAll('div.highlighted > p');

Внутри их реализации в javascript.

Это то, что jQuery сейчас использует внутри; Он реализует sizzle.js, js-библиотеку селекторов, которая выбирает, использовать ли querySelector или обычную функцию getElementsByTagName;

Например, для функции конструктора jquery $(), если первым аргументом является строка: $(iAmAString), то, если первая буква строки — #, jquery вызовет document.getElementById(iAmAString.substr(0)). Если нет, это позволит sizzle обрабатывать вызов querySelector в зависимости от совместимости браузера и сложности строки.

и много других классных вещей.

Быть максимально точным при выборе элемента, использовать базовые функции и кэшировать часто используемые селекторы, уменьшит количество проверок при прохождении через эту большую цепочку и/или даже обойдет всю цепочку.

Для некоторых веб-сайтов это имело особый эффект, создав эффект потрясающего котенка на единороге, что еще сказать:

поддержка совместимости находится здесь https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll

person Abdoul Sy    schedule 17.06.2013