Производительность селекторов jQuery и локальных переменных

Рекомендуется ли, когда мне нужно получить доступ к результату селектора jQuery более одного раза в области действия функции, я запускаю селектор один раз и назначаю его локальной переменной?

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

var execute = function(){
    var element = $('.myElement');
    element.css('color','green');
    element.attr('title','My Element');
    element.click(function(){
        console.log('clicked');
    });
}

чем этот код:

var execute = function(){
    $('.myElement').css('color','green');
    $('.myElement').attr('title','My Element');
    $('.myElement').click(function(){
        console.log('clicked');
    });
}

Если нет никакой разницы, может кто-нибудь объяснить почему? Являются ли элементы кэша jQuery после их выбора, поэтому последующим селекторам не нужно снова искать домен?

Ответы

Ответ 1

Повторное использование ссылки на селектор, ваш первый случай, определенно быстрее. Здесь тест, который я сделал как доказательство:

http://jsperf.com/caching-jquery-selectors

Последний случай, переопределяя ваши селекторы, сообщается как ~ 35% медленнее.

Ответ 2

Не забывайте об этом:

var execute = function(){ 
    $('.myElement')
        .css('color','green')
        .attr('title','My Element')
        .click(function(){ 
            console.log('clicked'); 
        });
}

Ответ 3

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

Ответ 4

Другим вариантом здесь является использование each вместо повторения селектора и связанная с ним работа, время и время снова

var execute = function(){
    $('.myElement').each(function() {
      var elem = $(this);
      elem.css('color','green');
      elem.attr('title','My Element');
      elem.click(function(){
        console.log('clicked');
      });
    });
}

Ответ 5

Вы действительно забываете о действительно кэшированном подходе.

Вещь с jQuery заключается в том, что первоначальный поиск: $('.selector') стоит дорого. Но после этого привязка ваших действий к ней или назначение ее переменной и выполнение ваших действий над переменной не имеют большого значения. Основной прирост производительности, который вы можете получить, еще больше кэширует элемент и не назначает селектор jQuery каждую итерацию вызова вашей функции.

var element = $('.myElement');
var execute = function(){
    element.css('color','green');
    element.attr('title','My Element');
    element.click(function(){
        console.log('clicked');
    });
}

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

См. http://jsperf.com/caching-jquery-selectors/17

Примечание. Если ваш DOM изменяется во время его жизни, вы можете обновить переменную element с помощью нового выбора элементов.