Question

我很好奇，就性能而言，以下两个代码示例是否相同：

jQuery(document).ready(function($){
      var $logo = $("h1.logo");
      $logo.on("mouseenter", function() {
        // Something
      });
}

Vs的

jQuery(document).ready(function($){
      $("h1.logo").on("mouseenter", function() {
        // Something
      });
}

更确切地说，jQuery是否会隐式地将$("h1.logo")转换为变量，还是会在每个mouseenter事件中初始化一个新的jQuery对象？

Answer 1

$("h1.logo")将返回对象的引用。

代码的第一个版本会将该对象存储在名为$logo的变量中。

在这两种情况下，都会在该对象上调用on方法。

其他任何东西（在该代码中）都不会触及变量。

我不太清楚jQuery的内部结构，但据我所知，mouseenter事件既不会重用原始的jQuery对象，也不会创建一个新的jQuery对象。（函数内部this的值将是DOM Element对象，而不是jQuery对象。）

当mouseenter事件触发时发生任何事情，$logo将不会被触及，因为事件处理函数内部未引用它。

如果该对象被重用，那么它将来自另一个对它的引用（即不是复制到$logo变量中的引用）。

因此，代码的第二个版本稍微高效一点，因为它没有花时间在变量中存储值，然后只使用该值一次。这可能会被JavaScript编译器优化掉。无论哪种方式，这是一个微不足道的变化，从有效的角度来看是不值得思考的。

首先优化可读性和维护。

当你担心速度时，使用分析器并找出你的代码真正慢的地方，而不是担心像这样的琐碎事情。

Answer 2

是的，他们是等同的。如果要再次在代码中使用相同的选择器，则使用var $logo = $("h1.logo");实际上更有效。您的代码不会再次在DOM中搜索，而是知道您的选择器在哪里。

例如，

    jQuery(document).ready(function($){
         $('h1.logo').addClass('clicked');
         var html = $('h1.logo')[0].html();
         $('h1.logo').on("mouseenter", function() {
            // Something
         });
     }

如果您一次又一次地转到logo元素，最好像下面那样缓存选择器，这样您就不会创建new jQuery每次需要调用方法时对象。

   jQuery(document).ready(function($){
          var $logo = $(".logo");
          $logo.addClass('clicked');
          var html = $logo[0].html();
          $logo.on("mouseenter", function() {
            // Something
          });
    }

Answer 3

两种方法都是一样的。如果你想在同一个jquery元素上做更多的操作（即$（＆＃34; h1.logo＆＃34;）），建议使用第一个选项。在这种情况下，将使用本地参考副本。现在考虑这个例子，两者都是相同的，在第二个选项$("h1.logo")中返回一个jquery元素的实例，与第一个方法相同。

Answer 4

是的，那是一样的。您只是将一个jquery对象放在一个变量中。对于$，有些人喜欢将一个美元符号与变量放在一起，以区分常规变量和jQuery对象。

Answer 5

首先，如前面的答案中所述，如果您要再次使用该元素，请务必将其分配给本地var。分配单个var相对可以忽略不计，所以我不担心。保持您的代码首先可读！

你的问题的答案取决于解释器而不是jQuery。 V8在代码上运行了很多优化，我猜这将是其中之一，但这需要调查...

如果您想测试各种口译员的表现，只需使用http://jsperf.com/进行测试：）

这两个jQuery行是否相同？

5 个答案: