性能jquery選擇與ID

Question

我知道在jQuery的，如果我們使用ID選擇元素，它是如此efficient.I有一個關於這個問題的選擇：

請考慮此因素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來運行速度測試，比較功能：Test Case。結果：

$('#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 

像預期的那樣，吸氣劑天然是最快，其次是jQuery的吸氣劑僅具有1選擇器在天然速度小於10％。具有2個參數的jQuery獲取器甚至不會接近每秒本地代碼的操作，特別是類選擇器，因爲與ID相比，類通常應用於多個元素。 （本機ID選擇停止搜索，他們已經找到了一個元素之後，我不知道如果jQuery不會了。）

Answer 3

最快的將是：

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

，因爲在這種情況下，jQuery的不要」不得不搜索整個dom樹來找到'#Mytbl'。它只會在給定的範圍內進行搜索。 IE瀏覽器只會搜索'#MytblContainer'。

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。

而且

$('#Mytbl .MyClass') 

是最慢的，因爲你沒有指定具有類「MyClass的」

Answer 6

這是一些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 7

有兩件事情：

• 更多選擇=較慢的搜索。如果你能用較少的謂詞得到你想要的結果，那就這樣做。
• 通過ID獲取元素比獲取類更快。 getElementById是JavaScript的核心功能，因爲它經常使用而經過了大量優化。儘可能利用這一點。
• 空間選擇器（''）比子選擇器（'>'）昂貴得多。如果您可以使用兒童選擇器，請這樣做。

這些規則適用於CSS，因爲他們使用JavaScript和jQuery。

Answer 8

顯然，第一個，$("#MyElement")比其他2
訪問了ID的元素總是更快速度較快，但有時我們必須找到一些集裝箱的一些元素。在這種情況下，我們更喜歡.find()或.filter()（取決於情況）。
選擇器之間的區別取決於瀏覽器到瀏覽器。例如如果你通過IE訪問，它會比FF慢。訪問具有類而不是ID的元素時FF更快。

在你的第二個例子中，即$("#mytbl #MyElement")，在這裏你找到#MyElement根據#mytbl這是合法但不合適的方式。既然你已經知道元素的ID（假設你的頁面上只有一個這個ID的元素），所以最好使用$("#MyElement")。 $("#mytbl #MyElement")將首先讀取#mytbl並遍歷以找到它下面的#MyElement，因此耗時且速度慢。

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

Answer 9

另外，如果您需要嵌套的選擇，這是更快地使用$（）。find（）方法。find（）方法

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

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

後者約65％的速度。