2013-07-19 67 views
10

我试过找到答案,并且我找到了相关问题,虽然他们确认我的发现(that one multiple selector call is slower than multiple single selector calls),但他们都没有告诉我为什么。多选择器vs单选器性能

基本上,当你运行该代码:

$("#one, #two").hide(); 
$("#one, #two").show(); 

在此代码:

$("#one").hide(); 
$("#two").hide(); 
$("#one").show(); 
$("#two").show(); 

那么后者将约50%的速度。

但是,一旦我们添加了第三个选择器,性能差异加快了39%。

第四选择器差异:26%更快。

第五:快30%。

第六:快31%。

十:加快31%。

(请注意,这些价值观似乎范围约5%的保证金)

所以我们得到的东西看起来是这样的:

enter image description here

的表现似乎高原大约6选择。它似乎从来没有比通过一次通话完成任何“速度”慢31%。 这是为什么?个人而言,我喜欢每次调用使用多个选择器,但它似乎有一个(相对)大的性能影响。这个(不)适合什么时候使用?

+1

有趣。我一直认为第一个案例(多个)会更快。类选择器,类似的性能呢? –

+0

这也是我的假设,所以我对此感到惊讶。我没有检查过类选择器,但是值得研究。我稍后会运行一些测试。 – Johannes

+0

我不确定*相对较大*。如果参考代码已经运行在微秒级以下,那么50%的速度并不意味着太大。 –

回答

4

在这两种情况下,您都使用ID进行操作,因此可以将其转换为本机getElementById调用。

然而,在第一情况下,2件额外的事情必须做

  1. 的彗差必须进行处理,所以有附加的解析涉及
  2. 的2个结果必须合并,通过该操作jQuery asserts that they are returned in the same order as in DOM

我想第二个操作花的时间最多。