一個標記名，多個attrs - 用過濾器干擾查詢或使用多個選擇器更快？

我想知道以下哪個jQuery查詢會更快。我正在尋找匹配任何具有src屬性或data-src屬性的span標籤。一個標記名，多個attrs - 用過濾器干擾查詢或使用多個選擇器更快？

var a = $('span[src],span[data-src]'); 


var b = $('span').filter('[src],[data-src]');

我的直覺是（b），但可能有我不知道的優化。

謝謝。

UPDATE：

基於快速測試以100×span[src]，100×span[data-src]，和100×span要素：（a）出來周圍4 - 快8倍取決於瀏覽器。在IE8上，速度要快很多（約50倍），IE6/7也差不多。

~~我想知道爲什麼它更快？~~

萬一（a）jquery委託整個選擇器查詢可用的本地querySelectorAll。所以在現代瀏覽器中，看起來像是一個較慢的查詢實際上非常快。

來源

2011-03-03 johnhunter

你可以做一些剖析，找出;） –

沒錯，但它的價值首先要求:) – johnhunter

100次迭代不值得剖析。試着用5000個試一試，看看更快。 – DoXicK

在http://jsfiddle.net/B9Vmy/1/我跑一些測試（用於控制檯東西使用螢火蟲）

6000個跨度（2000年跨度，2000 SRC，2000年，2000年數據-SRC）這個跑了大約8毫秒，因此選擇部分是可忽略的。是什麼讓這麼慢是創建jQuery對象（jQuery（element））。

雖然A只對返回的結果做了一次，但B對每個元素都做了這樣的處理，然後再使用這些結果，並對返回的結果再做一次。

然後還有可能被用於選擇的元素嘶嘶引擎......看看過濾器定時笑:-)

來源

2011-03-03 15:14:06 DoXicK

感謝您運行測試。這裏有趣的是，如果（a）jquery將整個dom查詢'span [src]，span [data-src]''委託給原生的'querySelectorAll'方法，該方法返回一個非生命節點列表，那末尾的。在情況（b）jquery使用'getElementsByTagName'，循環直播節點列表來構建一個數組，然後將結果交給'filter'，它使用Sizzle來解析JavaScript中的attrs - 因此速度較慢。 – johnhunter

這只是一個假設，更多基於邏輯而不是測試。

在第一種情況下，選擇器將選擇具有src屬性的span。

在第二種情況下，選擇器將選擇全部span，然後使用attr src過濾span。

所以，首先會更快。

如果我錯了，糾正我

來源

2011-03-03 11:16:55

+1，因爲首先測試確認更快。但是，就像@SikuSikuCom所說的那樣，是不是必須要兩次傳球？ – johnhunter

第一個版本會做完整DOM樹的通行證;而第二個只有一次。

真正的答案需要根據您的具體情況進行分析，即根據DOM的複雜程度。另外，不同的jQuery版本可能會導致不同的結果。

來源

2011-03-03 11:55:36 moey

這就是我的想法。儘管（a）似乎對我的（不可否認的簡單）文本案例來說更快。 – johnhunter

+1，因爲儘管速度更快，但兩次傳球仍然不錯。 – johnhunter

一個標記名，多個attrs - 用過濾器干擾查詢或使用多個選擇器更快？

回答

相關問題