5

我有一个看起来像这样的循环：

$('#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性能优化还是不是真的？

4

5 回答 5

5

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

您示例中的代码意味着将询问 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;
});
于 2013-01-29T20:50:32.410 回答
3

是的，有性能损失。我创建了一个小演示，说明使用 $(this) 比使用它的存储版本要慢。

JSFiddle 演示在这里。

不，我认为您不需要更改代码。在这种情况下，收益将非常小，以至于您几乎不会注意到任何差异。也许在您正在开发游戏或数据处理应用程序的另一种情况下，这可能很重要。

这是我的测试结果...

Testing jquery version...
1000000 iterations $(this): 0.006849ms
Testing non-jquery version...
1000000 iterations of this$: 0.001356ms
于 2013-01-29T21:04:32.250 回答
2

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

话虽如此，您获得了一点性能，但在可读性、可维护性或其他通常必须牺牲以获得性能的东西方面没有损失，因此您不妨进行调整。

于 2013-01-29T20:49:35.480 回答
1

对此进行测试表明没有性能影响，至少在 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/

于 2013-01-29T21:04:18.410 回答
0

嗯，呃。

一般来说，调用任何函数都是一笔开销。调用$()是一个巨大的调用（比较调用时间与Vanilla JS相比）并且应该尽可能避免调用。

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

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

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

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

相反，如果你做了：

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

有用。当然，这是一个简单的示例，因为您可以重新排列代码行并且它也可以工作，但我想在这里指出一点：p

于 2013-01-29T20:56:14.717 回答