Ссылка на селектор быстрее в jquery, чем на самом деле вызов селектора?если да, то насколько это имеет значение?

Question

$(preview-button).click(...)
$(preview-button).slide(...)
$(preview-button).whatever(...)

Лучше ли это делать:

var preview-button = $(preview-button);
preview-button.click(...);
preview-button.click(...);
preview-button).slide(...);
preview-button.whatever(...);

Вероятно, было бы лучше сделать это ради поддержания чистоты и модульности кода, НО это влияет на производительностьмудрый?Один занимает больше времени, чем другой?Спасибо, ребята.

Answer 1

Да, это так, когда вы используете селектор, не сохраняя его в переменной, jQuery должен анализировать DOM КАЖДЫЙ РАЗ.

Если бы у вас было что-то вроде $(".class") jQuery должен был бы находить элементы с этим классом каждый раз, когда вы его используете, но если он хранится в переменной, он использует уникальный идентификатор в переменной. Нет необходимости искать.

Так что да, я бы полностью рекомендовал сохранить его в переменной.

UPDATE: Добавлена ​​цепочка в качестве альтернативы.

Если вы используете селектор только в одном месте, вы также можете выполнить цепочку , что означает, что вы добавляете один метод за другим с такой же точечной нотацией, например:

$(".class")
       .click(function(){ ... })
       .mouseenter(function(){ ... })
       .css( ... );

Answer 2

Да. Вы можете также связать это:

$(preview-button)
    .click(...)
    .slide(...)
    .whatever(...);

Answer 3

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

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(function(){
  //Try changing this value to see what happens as the number of nodes increases or decreases.
  for(i=1;i<2905;i++){
    $('body').append('<div id="'+i+'">'+i+'</div>')
  }
  //Case 1: Query the DOM once for each action
  var start = new Date().getTime();
  $('#2900').css('color','red');
  $('#2900').hide();
  $('#2900').show();
  $('#2900').html(new Date().getTime() - start);

  //Case 2: Chaining. Each method passed $('this') to the next one
  var start = new Date().getTime();
  $('#2901').css('color','blue').hide().show().html(new Date().getTime() - start);

  //Case 3: Use of a named variable
  var start = new Date().getTime();
  var a = $('#2902');
  a.css('color','green');
  a.hide();
  a.show();
  a.html(new Date().getTime() - start);

})
</script>

UPDATE:

Очевидно, что Firefox выполняет какое-то кэширование, и три случая работают очень схожим образом. С другой стороны, Chrome и Safari имеют довольно низкую производительность в случае 1 по сравнению со случаями 2 и 3 (особенно с увеличением числа или узлов).