Селекторы jQuery, эффективность

Question

В последнее время я больше читаю об эффективности различных селекторных двигателей. Я знаю, что jQuery использует движок Sizzle, а в этом блоге о некоторых вещах jQuery упоминается, что движок Sizzle разбивает ваш селектор на массив, а затем разбирает слева направо.

Затем справа налево расшифровывает каждый элемент с помощью регулярных выражений. Это также означает, что самая правая часть вашего селектора должна быть как можно более конкретной, например, идентификатор или имя тега.

Мой вопрос: эффективнее ли запускать селектор с просто указанным идентификатором или именем тега:

var div = $('#someId');
//OR
var div = $('div#someId');

Поскольку я пишу свой CSS в форме div#someId, я склоняюсь к тому, чтобы мои селекторы выполнялись одинаково, заставляю ли Sizzle выполнять дополнительную работу (при условии, что QuerySelectorAll недоступен)?

Answer 1

jQuery и Sizzle оптимизируют селектор #id ^{[источник]} до document.getElementById(id). Я думаю, что они не могут оптимизировать это таким образом с tag#id.

Первый быстрее.

Кстати, указание имени тега для селектора #id является чрезмерным, поскольку в документе может быть только один тег с данным идентификатором. Переопределение медленнее даже в CSS .

Answer 2

Вместо того, чтобы размышлять, давайте измерим это!

Вот тестовый пример с загруженной страницей, затем сопоставление случайного элемента обоими методами.

Убедитесь, что вы прокручиваете вниз до самого низа.

http://jsperf.com/which-jquery-sizzle-selector-is-faster#runner

Как и следовало ожидать, простой идентификатор быстрее, чем квалифицированный тег (сокращение до getElementByID). То же самое при использовании классов.

Выбор по идентификатору значительно быстрее, чем по классу, в основном потому, что идентификаторы гарантированно будут уникальными.

Answer 3

Если вы используете jQuery, вы можете использовать браузер с getElementById.$('#someId') можно преобразовать в document.getElementById('someId').$('div#someId') не будет, поэтому будет быстрее потерять имя тега.

jsPerf демонстрирует это .Разница огромна.

Answer 4

var div = $('#someId'); //should be faster

jQuery будет использовать getElementById() для вышеуказанного селектора

var div = $('div#someId'); //would probably preform slower due to finding all the divs first

jQuery будет использовать getElementsByTagName(), затем выполнить итерацию по массиву элементов для вышеуказанного селектора

Вы также должны помнить, что имена тегов должны определенно использоваться с селекторами классов (когда это возможно)

var div = $('div.myclass') //faster than the statement below

против

var div = $('.myclass') //slower

Answer 5

Вы можете увидеть из исходного кода здесь: http://code.jquery.com/jquery-1.6.2.js в функции init.

Самый быстрый селектор - $(''), который сразу же возвращает пустой объект jQuery.

$('body') следующий, который jQuery преобразует в document.body

Следующий - $('#id'), который использует document.getElementById('id').

Любой другой селектор, такой как $('div#id'), будет простостать вызовом $(document).find('div#id').find() очень сложен по сравнению с любым из этих других решений и использует Sizzle JS для выбора div.

Answer 6

JsPerf: http://jsperf.com/jquery-id-vs-tagname-id

Первый будет быстрее, потому что нужно только проверить идентификатор. Второй выполняет ту же проверку И должен убедиться, что тэг правильный. div#id не даст вам элемент с идентификатором id, если это не div