$()。每个vs $ .each vs for jQuery中的循环?

时间:2013-02-11 08:11:15

标签: javascript jquery each

我无法理解为什么会这样。

我读了here

  

第一个 $。每个构成单个函数调用以启动   迭代器。

     

第二个 $(foo.vals).each 使三个函数调用启动   迭代器。

     
      
  • 第一个是$(),它生成一个新的jQuery包装器   set(不确定在此期间进行了多少其他函数调用   处理)。
  •   
  • 然后调用$()。每个。
  •   
  • 最后它使内部   调用jQuery.each来启动迭代器。
  •   
     

在你的例子中,差异可以忽略不计。   但是,在嵌套使用场景中,您可能会发现性能正在下降   一个问题。

     

最后,JQuery Enlightenment中的Cody Lindley不推荐使用   由于函数调用,$ .each用于大于1000的迭代   参与其中。使用法线(var i = 0 ... loop。

所以我用这个jsperf测试了它:

(任务:找到已经检查过其内部复选框的Tr,并将该颜色设为tr。)

这是 jsbin

但请看 jsperf

违背所有期望,相反是真的。 (chrome和FF和IE)

enter image description here

使用$().each的人(调用三种方法最快 等等。

这里发生了什么?

3 个答案:

答案 0 :(得分:37)

您的测试太重,无法确定三个循环选项之间的实际差异。

如果你想测试循环,那么你需要尽力从测试中删除尽可能多的非相关工作。

目前,您的测试包括:

  • DOM选择
  • DOM遍历
  • 元素突变

与循环本身相比,所有这些操作都非常昂贵。删除多余的东西时,循环之间的区别更加明显。

http://jsperf.com/asdasda223/4

在Firefox和Chrome中,for循环比其他循环快100多倍。

enter image description here

答案 1 :(得分:3)

  • $.each()是一个正在执行的jQuery函数,它将用于遍历列表,因此开销应该是jQuery函数以及为列表中的每个项调用该函数的开销。在这种情况下
  • $(thing).each()这背后的想法是$(thing)创建一个jQuery实例,然后迭代这个实例(.each对该实例进行操作)。在你的情况下,因为你调用它的实例已经是一个jQuery对象,所以开销很小(你是一个实例,哦,是的)。
  • for()在这种情况下,除了在每次迭代中查找列表的长度外,根本没有开销。

考虑一下:

var l = g.length;
for (var i=0;i<l;i++) {
    // code;
}

根据您的HTML,大部分时间都可能在Sizzle Jquery解析器中找到文档中的选择器。

另外请注意,我认为你的选择器不是最好的,除非事情发生了很大变化,最近jQuery选择器从右到左进行了评估,考虑通过对下面的所有内容执行.find()来限制选择器的范围。 id引用的第一个标记,因为它将只搜索文档的一个子集。

答案 2 :(得分:0)

对“任务”的不同方法http://jsfiddle.net/ADMnj/17/

但我认为性能问题来自于你没有在正确的事情中说明选择器

#t tr input:checkbox:checked 

VS

#t tr :checkbox:checked 

检查是否选中了复选框的正确方法是将其称为

#t tr input[checked="checked"]

W3.ORG's selector list see the E[foo]

最后但并非最不重要的是最快的也是最短的代码,可能是你从3行对4和5行代码得到的轻微性能不同但不能证明这一事实