JQuery, вопрос оптимального использования

Question

Я не знаю, как работает jQuery под капотом, но скажем, что в какой-то момент я создаю объект jQuery:

var thingy = $('#thingy');

Далее в коде есть ли разница в повторном использовании thingy:

thingy.empty();

против повторного создания jQuery?:

$('#thingy').empty();

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

Первоначально я предполагал, что документ сканируется при создании объекта $.Но потом мне пришло в голову, что $ объект может быть просто итератором, который сканирует документ снова каждый раз, когда вы выполняете один из его методов.Я думаю, это суть моего вопроса.

Answer 1

Это не так плохо, если ваш селектор - это один объект, но что если ваш селектор - $ ('. Thingy')?Каждый раз, когда вы создаете его снова, он выполняет итерацию всего документа в поисках этого класса, а не использует сохраненный выбор.Не так уж плохо, но затем он создает новый объект DOM для этого выбора.Если есть 500 экземпляров .thingy, это может очень быстро увязнуть.

ETA: как указывает no.good.at.coding, каждый раз, когда вы используете селектор любого типа, весь DOMпройден.Так что - сохраняйте в переменной, вызывайте переменную.

Answer 2

Ответы на эти вопросы SO показывают, что это будет быстрее, если вы повторно используете объект jQuery:

• Является ли ссылка на селектор быстрее в jquery, чем на самом деле вызов селектора? если да, то насколько это важно?
• Самый эффективный способ повторно использовать элементы, выбранные jQuery

Answer 3

Другая вещь, которую следует учитывать, - это изменения DOM. Убедитесь, что после того, как вы установили штуковину, ничего не произойдет, и $ ('# thingy') исчезнет!

Answer 4

Вообще говоря, вам нужно будет «кэшировать» результаты селектора, если вы уверены, что они не будут меняться.

Ваш пример довольно тривиален в том, что селектор #idуже достаточно эффективен (по сути, он просто передает его прямо на вызов document.getElementById().

. Как уже упоминали другие, вы начинаете видеть экономию, когда используете менее производительные селекторы (такие как $('.class')).

Используя переменные таким образом, вы можете сэкономить много дополнительной обработки, например:

var tree = $('.bigTree');

// Do random stuff with tree
// ...

var segment = tree.find('.subsection');

// Do random stuff with segment...

В приведенном выше примере переменная «сегмент» может использоватьрезультаты дерева переменных без необходимости повторного доступа ко всему DOM, что экономит вам часть производительности. Хотя такие простые примеры редко стоят усилий, убедитесь, что вы делаете такие вещи для фрагментов кода (таких какциклы) может помочь значительно ускорить ваше приложение.

Конечно, убедитесь, что, если вы динамически обновляете DOM, вы используете "свежие"избиратель, чтобы убедиться, что вы забрать любые изменения:)