Стоит ли кэшировать $ (this) в jQuery, если он используется более одного раза?

Question

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

var $selected = $('.some-selected-element');

process($selected);
doStuff($selected);

Но есть ли выигрыш в производительности для кэширования $(this), если оно используется несколько раз?

$('.some-selector').hover(function () {
    if (!$(this).hasClass('some-other-class')) {
        $(this).addClass('another-class');
    }
    process($(this));
}

Answer 1

Да, производительность повышается, поскольку она не позволяет jQuery интерпретировать ваш селектор.

Вот интерпретация селектора и то, что вы будете обходить.https://github.com/jquery/jquery/blob/master/src/core.js#L78-188

По сути, эта часть

if ( selector.nodeType ) {
    this.context = this[0] = selector;
    this.length = 1;
    return this;
}

Answer 2

Да, есть преимущества в производительности.

Кэширование результата $(this) позволяет избежать нескольких вызовов функции $() и создания нескольких различных объектов jQuery, которые все ссылаются на один и тот же элемент.

Answer 3

jsperf.com - отличный ресурс, который я часто посещал в последнее время, для оценки производительности JavaScript.Например, следующий тест оценивает производительность кэшированных элементов jQuery по сравнению с не кэшированными:

http://jsperf.com/jquery-cache-vs-no-cache

Результаты повторяют ответы в этой теме.

Answer 4

Функция $ () находит узел DOM для элемента и применяет к нему методы-прототипы для браузеров, которые еще не добавляют их при определении (браузеры IE). Так что постоянно звонивший будет выполнять эту операцию. Для производительности и читабельности лучше кэшировать выходные данные вызова функции $ () для переменной.