性能jQuery選擇

Question

的是這樣的選擇：

$("div#myId") 

快那麼這個選擇：

$("#myId") 

？ 兩者都很好，但我想提高性能。

Answer 1

永遠不要在ID前添加標籤名稱，它會減慢選擇器的速度。 $('#content')優於$('div#content')

jQuery開始使用正則表達式解析選擇器。如果它公開選擇器是一個id，因爲它以一個尖銳的（＃）開頭，所以在後臺jQuery將使用JavaScript原生的getElementById（）方法，這非常快。

Answer 2

每個jsperf,$("#myId")是〜4x更快比$("div#myId")。

使用id值時，添加到選擇器的任何內容都不會提高性能。瀏覽器已經有了所有id值的索引，因爲文檔中的所有id都應該是唯一的。向選擇器添加其他內容只是使其必須測試更多的東西。例如，如果使用#myId，則可以使用到document.getElementById("myId")的短路，但在div#myId中，jQuery或其調用的函數必須首先將選擇器分解爲多個片段，然後查找具有正確ID的對象，然後檢查它是否存在也是div。

如果你真的想知道絕對肯定會有怎樣的表現差異在任意兩個場景之間，那麼你必須寫一個性能測試（像http://jsperf.com的工具，在所有相關的瀏覽器進行測試。

通常你應遵循使用得到適當的性能完成工作的最簡單的代碼的公理，這很可能是$("#myId")，除非你真的想優化在這種情況下，你會使用document.getElementById("myId")純粹的性能。

而且，對於咧嘴一笑，jQuery的根本就不快（它創建一個對象，運行一個構造函數，分析sele ctor，評估選擇器，查看可以傳遞的其他選項等等），所以如果你真的關心優化性能的最大化，那麼你首先不會使用jQuery。也就是說，jQuery大大加快了編寫代碼的時間，所以在許多情況下它是值得的。

查看jsperf：http://jsperf.com/jqvsother進行性能對比。

在Chrome中，有三個之間存在相當大的差異：

$("div#myId")     - 446,589 ops/sec 
$("#myId")      - 1,705,994 ops/sec 
document.getElementById("myId") - 32,278,617 ops/sec 

所以，$("#myId")是比〜快$("div#myId") 4x和document.getElementById("myId")是19倍比$("#myId")更快。這是比我預期的更大的差異。

這裏有一個圖形呈現（長條的速度更快）：

你總是學到一些東西，當你衡量，而不是猜測。

---

鑽研jQuery選擇處理的代碼，你會看到這一點：

1. 檢查是否有選擇獲得通過。
2. 檢查，如果它是一個字符串，如果它看起來像HTML "<.....>"
3. 如果看起來並不像簡單的HTML，在其上運行此/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/正則表達式
4. 如果正則表達式顯示選擇只是"#xxxx"，然後調用document.getElementById() 。
5. 如果它看起來像更復雜的HTML（可能帶有屬性），那麼將該HTML處理成DOM對象
6. 如果沒有任何這些特殊字符串，則運行.find()來查找選擇器匹配。運行.find()將關閉Sizzle引擎的選擇器進行評估（從頭開始）。
7. Sizzle引擎然後在選擇器上運行另一個正則表達式，再次尋找快捷方式，它可以選擇更快的方式。
8. 最終，如果沒有快捷方式通過，並且在選擇器中沒有特殊項目，請致電querySelectorAll()。
9. 等等，處理其他可能的非字符串的東西傳遞（DOM對象，jQuery的對象，等...）

所以，我帶走從這幾件事情。首先，有一個簡單的「#xxxx」字符串可以避免很多其他處理。毫不奇怪，爲什麼這會更快。其次，任何可以避免進入最終調用querySelectorAll()的Sizzle選擇器評估代碼深度的快捷方式都會加快速度。

Answer 3

兩個都很快，第二個是最快的，但差別幾乎爲零。

瀏覽器將首先使用該ID。這已經是有史以來最快的選擇。

在第一個示例中，在瀏覽器獲取與ID匹配的元素後，它將對選擇器的其餘部分（標記名稱）進行測試，以確保它匹配。

無論如何，這是一個元素，這個檢查幾乎沒有成本，但它也不是必需的。

Answer 4

基於http://learn.jquery.com/performance/optimize-selectors/#specificity很好地注意到jQuery從右向左讀取選擇器。

也就是說，如果你寫這樣的事情$("div#myId") jQuery將得到所有的元素，搭配一個具有相同ID（因爲ID是唯一的，應立即停止在這裏），但因爲你還指定DIV，jQuery將繼續並檢查它是否是div。這將使一個額外的工作步驟是不必要的。

因此，對於進一步的選擇器，您應該注意到您應該在右側比左側更具體。