具有ID的jQuery選擇器的性能

Question

我知道在jQuery中我們是否使用ID來選擇元素，它是如此有效。我對此選擇器有疑問：

請考慮以下3個選擇器：

$('#MyElement')

$('#Mytbl #MyElement')

$('#Mytbl .MyClass')

哪一個更快？為什么？如何檢查在jQuery中選擇我的元素所花費的時間？

Answer 1

直接ID選擇器將永遠是最快的。

我根據您的問題創建了一個簡單的測試用例...

http://jsperf.com/selector-test-id-id-id-id-class

選擇嵌套的ID只是錯誤的，因為如果ID是唯一的（ 應該是唯一的），則無論是否嵌套都沒有關系。

Answer 2

第一個是最快的，僅因為它只具有1個要查找的屬性。 然而，

document.getElementById("MyElement")

甚至更快。 它是本機Javascript，與jQuery不同，瀏覽器立即知道您要執行的操作，而不必首先運行大量jQuery代碼來確定您要查找的內容。

您可以使用jsPerf進行速度測試，以比較功能： 測試用例 。 結果：

$('#MyElement')
Ops/sec: 967,509
92% slower

$('#Mytbl #MyElement')
Ops/sec: 83,837
99% slower

$('#Mytbl .MyClass')
Ops/sec: 49,413
100% slower

document.getElementById("MyElement")
Ops/sec: 10,857,632
fastest

如預期的那樣，本機getter最快，其次是只有1個選擇器的jQuery getter，其速度不到本機速度的10％。 具有2個參數的jQuery getter甚至無法接近本機代碼每秒的操作量，尤其是類選擇器，因為與ID相比，類通常應用於多個元素。 （本機ID選擇器在找到一個元素后停止搜索，我不確定jQuery是否也會搜索。）

Answer 3

這是停止一些JavaScript調用之間的時間的方法

selectorTimes = [];
var start = new Date().getTime();
$('#MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl #MyElement')
selectorTimes.push(new Date().getTime()-start);

start = new Date().getTime()
$('#Mytbl .MyClass')
selectorTimes.push(new Date().getTime()-start);

console.log(selectorTimes);

我認為第二個選擇器效率不高，如果您有domid，請直接選擇此選項：$（'＃MyElement'）

Answer 4

這個給你。 請參閱每個示例頂部的注釋：

//fastest because it is just one id lookup: document.getElementById("MyElement") with no further processing.
$('#MyElement')
//a little slower. JQuery interprets selectors from right to left so it first looks up for #MyElement and then checks if it is hosted in #Mytbl
$('#Mytbl #MyElement')
//the slowest of all. JQuery interprets selectors from right to left so it first finds all elements with .MyClass as their class and then searches for those hosted in #Mytbl.
$('#Mytbl .MyClass')

如果可以，請始終僅使用id（如第一個示例一樣），但是如果必須將多個選擇器和類鏈接在一起，請嘗試將最嚴格的選擇器放在右邊。 例如一個ID。 因為JQuery從右到左解釋選擇器。

Answer 5

幾件事：

• 選擇器越多=搜索速度越慢。 如果可以用更少的謂詞獲得所需的結果，請這樣做。
• 通過ID獲取元素比通過類獲取元素要快。 getElementById是JavaScript的核心功能，由於它的使用頻率很高，因此已對其進行了優化。 盡可能利用這一點。
• 空間選擇器（''）比子選擇器（'>'）昂貴得多。 如果可以使用子選擇器，請使用。

這些規則與JavaScript和jQuery一樣適用於CSS。

Answer 6

另外，如果您需要嵌套選擇器，則使用$（）。find（）。find（）更快。

http://jsperf.com/selector-test-id-id-id-id-class/2

$('#Mytbl .MyClass')
$('#Mytbl').find('.MyClass')

后者快了約65％。

Answer 7

顯然，第一個$("#MyElement")比其他兩個快。
訪問具有其id的元素總是更快，但有時我們不得不在某個容器中找到某個元素。 在那種情況下，我們更喜歡.find()或.filter() （取決於情況）。
選擇器之間的差異取決於瀏覽器之間的差異。 例如，如果您通過IE上的類進行訪問，它將比FF慢。 使用類而不是ID訪問元素時，FF更快。

在第二個例子中，即$("#mytbl #MyElement")在這里你發現#MyElement下#mytbl這是合法的，但不恰當的方式。 由於您已經知道該元素的ID（假設您的頁面上只有一個具有此ID的元素），因此最好使用$("#MyElement") 。 $("#mytbl #MyElement")將首先讀取#mytbl並遍歷以在其下查找#MyElement，因此既費時又緩慢。

為了測試不同的情況，您可以編寫一個小的代碼段來循環讀取/訪問至少10000個元素，否則很難確定哪種方法更快。

Answer 8

最快的將是：

  $('#Mytbl', '#MytblContainer' );    

因為在這種情況下，jQuery不必搜索整個dom樹即可找到“ #Mytbl”。 它將僅在給定的范圍內搜索。 IE瀏覽器只會在'#MytblContainer'中進行搜索。

Answer 9

我想說第一個是最快的，因為您只是在搜索一個ID。

和

$('#Mytbl .MyClass')

是最慢的，因為您未指定具有“ MyClass”類的元素的類型