Question

当选择器为$(this)时，创建和重用引用是否会显着提高性能？

当我在同一范围内多次使用相同的选择器时，我为我的jQuery选择器创建了引用。以下是更有效的

    var jSel = $('div.some_class input.some_other_class');
    some_function1(jSel);
    some_function2(jSel);

比这个

    some_function1($('div.some_class input.some_other_class'));
    some_function2($('div.some_class input.some_other_class'));

但是，如果选择器只是$(this)，其中this是jQuery方法中的dom元素，那该怎么办呢？我是否需要创建对$(this)的引用并重用该引用，还是可以创建多个$(this)选择器并期望获得类似的性能？

以下是

    var jSel = $(this);
    some_function1(jSel);
    some_function2(jSel);

明显快于以下？

    some_function1($(this));
    some_function2($(this));

Answer 1

以下内容明显快于以下情况吗？

否即可。它在显微镜下更快;在几微秒的范围内。

这会阻止您将结果分配给变量并使用它吗？否即可。使用变量可以为this提供更多含义，并且可以更容易键入。另外，如果您不想在$(this)上操作，而是想要$(this).next()，则必须在一个地方而不是n进行更改。

您会发现jQuery构造函数高度已经优化，可以接受单个DOM元素作为参数。当您拨打$(DOMElement)（the exact code时），以下内容会after the jQuery object has been created执行：

var match, elem, ret, doc;

// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
    return this;
}

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

// Handle lots of other param types, but we hit the above one, so we've stopped now...

Answer 2

这完全取决于你拨打多少电话。将变量设置为有效的变量肯定比保持相同的工作更快，但样本中的差异可以忽略不计。如果你在一个500万的循环中这样做，差异将不那么微不足道，设置变量将更快，因为它只做一次而不是500万次。

Answer 3

在这种特殊情况下，如果您真的在编写期望将jQuery对象作为参数的函数（如示例中所示），那么您可以将这些函数重写为jQuery方法。然后你可以写：

$(this).some_function1().some_function2();

编写jQuery方法非常简单，至少是简单方法。一般（再次，简单）形式是：

jQuery.fn.some_function = function() {
  return this.each(function() {
    // stuff you want to do
  });
};

Answer 4

this是对象的引用。使用$(this)需要一些时间（因为jQuery将其转换为数组）但这次与恕我直言无关。所以第一种方法应该更快一点，但实际上你不会注意到差异。

Answer 5

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

应该给你一个速度差异的基本概念。在大多数简单的情况下，它可能不会明显影响您的代码执行速度，但JS是一个瓶颈，每一点都有帮助+它始终是使良好实践成为常规的最佳选择！

Answer 6

一个基准：

http://jsperf.com/jquery-this-selector-performance

缓存或不缓存jQuery中的$（this）

6 个答案: