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每次使用时都需要找到该类的元素，但如果它存储在变量中，则使用变量中的唯一标识符。无需查询。

所以是的，我完全建议将其存储到变量中。

<强>更新添加链接作为替代方案。

如果您只在一个地方使用选择器，您还可以执行链接，这意味着您使用相同的点符号添加一个接一个的方法，如下所示：

$(".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>

更新：

显然Firefox会进行某种缓存，这三种情况的表现非常相似。另一方面，与案例2和案例3（特别是数字或节点增加）相比，Chrome和Safari在案例1中的表现相当差。

在jquery中引用选择器比实际调用选择器更快吗？如果是这样，它会产生多大影响？

3 个答案: