Обеспечивает ли использование $ this вместо $ (this) повышение производительности?

Question

Предположим, у меня есть следующий пример:

Пример первый

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $(this).stuff();
    $(this).moreStuff();
    $(this).otherStuff();
    $(this).herStuff();
    $(this).myStuff();
    $(this).theirStuff();
    $(this).children().each(function(){
        howMuchStuff();
    });
    $(this).tooMuchStuff();
    // Plus just some regular stuff
    $(this).css('display','none');
    $(this).css('font-weight','bold');
    $(this).has('.hisBabiesStuff').css('color','light blue');
    $(this).has('.herBabiesStuff').css('color','pink');
}

Теперь это может быть:

Пример два

$('.my_Selector_Selected_More_Than_One_Element').each(function() {
    $this = $(this);
    $this.stuff();
    $this.moreStuff();
    $this.otherStuff();
    $this.herStuff();
    $this.myStuff();
    $this.theirStuff();
    $this.children().each(function(){
        howMuchStuff();
    });
    $this.tooMuchStuff();
    // Plus just some regular stuff
    $this.css('display','none');
    $this.css('font-weight','bold');
    $this.has('.hisBabiesStuff').css('color','light blue');
    $this.has('.herBabiesStuff').css('color','pink');
}

Дело не в самом коде, а в использовании $(this), когда он используется более одного раза / дважды / три раза или более.

AmЛучше по производительности использовать пример два , чем пример один (может быть с объяснением, почему или почему нет)?

РЕДАКТИРОВАТЬ / ПРИМЕЧАНИЕ

Я подозреваю, что два лучше одного;меня немного пугало то, что я добавил свой код с $this, а затем непреднамеренно представил потенциально трудную для диагностики ошибку, когда я неизбежно забыл добавить $this в обработчик событий.Так что я должен использовать var $this = $(this) или $this = $(this) для этого?

Спасибо!

РЕДАКТИРОВАТЬ

Как Скотт указывает ниже, эторассматривается кеширование в jQuery.

http://jquery -howto.blogspot.com / 2008/12 / caching-in-jquery.html

Джаред

Answer 1

Да, обязательно используйте $this.

Новый объект jQuery должен создаваться каждый раз, когда вы используете $(this), тогда как $this сохраняет один и тот же объект для повторного использования.

---

*Тест производительности 1008 * A показывает, что $(this) значительно значительно медленнее, чем $this.Однако, поскольку оба выполняют миллионы операций в секунду, маловероятно, что это будет иметь какое-либо реальное влияние, но в любом случае лучше повторно использовать объекты jQuery.Когда реальное влияние на производительность возникает, когда селектор, а не объект DOM, многократно передается в конструктор jQuery - например, $('p').

---

Что касается использования var, снова всегда используйте var для объявления новых переменных.При этом переменная будет доступна только в функции , в которой она объявлена, и не будет конфликтовать с другими функциями.

---

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

var $this = $(this);
$this.addClass('aClass');
$this.text('Hello');

... объедините функции в цепочку, чтобы исключить использование дополнительной переменной:

$(this).addClass('aClass').text('Hello');

Answer 2

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

var time = new Date().getTime();
$('div').each(function() {
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
  $(this).addClass('hello');
  $(this).removeClass('hello');
});
var now = new Date().getTime();
console.log(now- time);

var var_time = new Date().getTime();
$('div').each(function() {
  var $this = $(this);
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
  $this.addClass('hello');
  $this.removeClass('hello');
});
var var_now = new Date().getTime();
console.log(var_now - var_time);

Answer 3

@ Box9 полностью на высоте. Я не могу сказать вам, сколько раз мне пришлось проводить рефакторинг jQuery, поскольку люди не используют кеширование.

Я бы также добавил, что в сочетании с кэшированием люди должны научиться делать это:

var $element = $("#elementId"),
    elementLength = $element.length,
    elementText = $element.text(),
    someString = "someValue",
    someInt = 0,
    someObj = null;

вместо этого:

var $element = $("#elementId");
var elementLength = $element.length;
var elementText = $element.text();
var someString = "someValue";
var someInt = 0;
var someObj = null;

Answer 4

Да, если вы делаете ссылку на $ (this) несколько раз, вы должны сохранить ее в переменной.$ это просто соглашение, позволяющее другим знать, что $ this представляет объект jquery.

Это еще более важно, если ваш объект jquery был создан с помощью сложного селектора.

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

Пример:

$(this).addClass("someclass").css({"color": "red"});