2013-07-19 70 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

我想第二個操作花的時間最多。