在 jQuery 中缓存或不缓存 $(this)答案

【问题标题】：To cache or not to cache $(this) in jQuery在 jQuery 中缓存或不缓存 $(this)
【发布时间】：2012-03-06 23:06:26
【问题描述】：

Does creating and reusing a reference increase performance appreciably when the selector is $(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));

【问题讨论】：

Caching $(this) in jQuery 或 $(this) vs var xxx = $(this) (jsperf.com)

标签： javascript jquery

【解决方案1】：

下面的速度明显比下面的快吗？

否。它在微观上更快；在几微秒的范围内。

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

您会发现 jQuery 构造函数为接受单个 DOM 元素作为参数而高度优化。以下是在您调用 $(DOMElement)（当然是after the jQuery object has been created）时执行的the exact code：

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...

【讨论】：

【解决方案2】：

这完全取决于您拨打了多少电话。将变量设置为等于有效的变量肯定比继续做相同的工作要快，但在您的样本中差异将非常微不足道。如果您在 500 万次循环中执行此操作，则差异将不会那么微不足道，并且设置变量会更快，因为它只执行一次而不是 500 万次。

【讨论】：

【解决方案3】：

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

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

编写 jQuery 方法非常容易，至少是简单的方法。一般（又是简单的）形式是：

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

【讨论】：

是的，我同意。但我想让我的示例保持简单，因为扩展 jQuery 不是问题的重点。
OK 总的来说，调用函数比不调用函数需要更多时间。因此，缓存$(this) 的结果将节省少量时间。这是否值得取决于你。对我来说，缓存 $(this) 是值得的，因为它引入了清晰性，特别是如果你给这个值起一个好名字。
你总是缓存$(this)，还是偶尔缓存？
在一个非常简单的函数中，通常不会。然而，在更大的事件处理程序或类似的东西中，它有助于澄清正在发生的事情。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

一个小基准：

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

【讨论】：