jQuery class selector vs cached element + find

Question

У меня возникла ситуация, когда мне интересно, какой лучший подход подходит для производительности.

У меня есть название класса, назовем его .class-test. У меня также есть кешированный элемент, $ body.

можно либо извлечь .class-тест элемент по:

$('.class-test') 

или

$body.find('.class-test') 

В наихудшем сценарии, делает один из этих подходов верх над другой? Кроме того, если кто-то может описать, что делается под капотом, второй подход, который был бы велик (т. Е. Я знаю, что .find подчиняется Sizzle, но если элемент кэширован, у него уже есть дерево его элементов DOM, то нужно только пересечь это поддерево, чтобы найти класс? или это дерево только построено по мере необходимости?).

Answer 1

Разница в том, сколько раз вы погружаетесь в пул DOM, так сказать. В первом запросе jQuery будет искать внутри документа (верхний уровень) и перемещаться вниз в дерево DOM, проверяя каждый уровень до тех пор, пока он не дойдет до самого конца, а затем вернет все соответствующие элементы.

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

Когда вы углубляетесь в дерево DOM, это может быть большой заставкой. Вы можете сэкономить от 10 до 100 уровней проверки уровня. И хотя вы не заметите этого на небольших сайтах, в один прекрасный день вы можете работать с базами кода уровня предприятия, где эти выгоды от производительности будут очень полезны для вас.