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

StackOverflow https://stackoverflow.com/questions/1606262

Вопрос

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

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

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

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

или просто 

var Object = $('#Element');

Object.dothis();

Object.dothat();

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

тратя на метод Гоммея 

var Object = $('#Element');

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top