Есть ли разница в производительности между селектором jquery или переменной

Question

В последнее время меня интересует, есть ли разница в производительности между повторением селектора просто снова и снова или просто использованием var и сохранением селектора в нем и просто обращением к нему.

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

или просто

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

Я предпочитаю второй способ, потому что он выглядит чище и лучше обслуживается.

Answer 1

Разница в производительности, безусловно, есть, так как sizzle не нужно выполнять каждый раз, однако есть и разница в функциональности. Если dom меняется между 1-м и 3-м вызовами, кешированный объект jQuery все равно будет содержать старый набор элементов. Это часто может произойти, если вы кэшируете набор и затем используете его в обратном вызове.

Answer 2

Я предпочитаю второй способ. будет проще поддерживать код даже в случае изменения идентификатора элемента или класса.

Answer 3

Есть еще один быстрый способ. Это так же быстро, как ваш второй код.

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

по методу Гоммея

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Быстрее и сохраняет объект для последующего использования.

Answer 5

Сохранение результатов выбора jQuery в переменной происходит быстрее. Это связано с тем, что jQuery не нужно искать результаты каждый раз, когда вы пытаетесь получить к ним доступ.

Я собрал некоторые показатели производительности: http://jsperf.com/jquery-selectors-vs-stored-variable

В Chrome 26.0.1410.63 в Mac OS X 10.8.2:
Выбор: 40 276 операций / сек
Хранение переменной: 594 031 358 операций в секунду

Answer 6

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

Довольно хорошая статья по ускорению jQuery здесь: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/