Question

我有一个如下所示的循环：

$('#SomeSelectorID').find('.SomeElementsByClassName').each(function () {

    $(this).some code here;
    $(this).some other code there;
    $(this).some other code here and there;
});

如果我在循环的顶部写var TheThis = $(this);，然后用$(this)替换TheThis是否是性能优化？

Answer 1

这是一个明确的性能优化。你可能没有注意到，但没有理由不这样做。

示例中的代码表示将查询DOM 3次以查找$(this)元素，然后对其执行操作。将其缓存在变量中意味着只会发生一次。

如果您真的想看到差异，请尝试在JSPerf测试中将原始版本与下面的内容进行比较。

$('#SomeSelectorID').find('.SomeElementsByClassName').each(function () {
    var $this = $(this);
    $this.some code here;
    $this.some other code there;
    $this.some other code here and there;
});

Answer 2

是会有性能下降。我创建了一个小型演示，说明使用$（this）比使用它的存储版本要慢。

JSFiddle demo here。

否我认为您不需要更改代码。在这种情况下的好处将是如此之小，你几乎不会发现任何差异。也许在您开发游戏或数据处理应用程序的另一种情况下，它可能很重要。

以下是我的测试结果...

Testing jquery version...
1000000 iterations $(this): 0.006849ms
Testing non-jquery version...
1000000 iterations of this$: 0.001356ms

Answer 3

当然是性能优化。不管它是否值得，这才是真正的问题。如果你重申DOM，那肯定是值得的。在这种情况下，您只是在jQuery中包装一个对象，因此占用空间要小得多。

话虽这么说，你获得了一点性能，但在可读性，可维护性或者你为了获得性能而通常必须牺牲的其他东西方面却没有任何损失，所以你也可以进行调整。

Answer 4

测试显示没有性能影响，至少在Chrome上显示：

var start = new Date().getTime(),
    iterations = 50000;

$('#foo').find('.bar').each(function () {

    var that = $(this);

    for(var i = 0; i < iterations; i++)
      that.find('i');

});

console.log(new Date().getTime() - start);

使用$(this)结果或多或少相同。

http://jsfiddle.net/BuREW/

Answer 5

嗯，呃。

通常，调用任何函数都是一种费用。呼叫$()是一个巨大的呼叫（比较呼叫时间与Vanilla JS相比）和应尽可能避免的呼叫时间。

将其返回值存储在变量中总是一件好事，但它也避免了某些“陷阱”。

例如，假设您要将所有.test元素更改为绿色并删除该类。你可以这样做：

$(".test").removeClass("test");
$(".test").css({"color":"green"});

只是发现它没有将颜色更改为绿色，因为$(".test")不再是同一件事了。

相反，如果你做了：

var test = $(".test");
test.removeClass("test");
test.css({"color":"green"});

有效。当然，这是一个微不足道的例子，因为你可以重新排列代码行，它也可以工作，但我想在这里指出一点：p

用变量替换$（this）会产生任何性能差异

5 个答案: