Jquery元素+類選擇器性能

我希望$('#childDiv2 .txtClass')或$('#childDiv2 input.txtClass')在選擇<input type="text" id="txtID" class="txtClass"/>元素時表現更好。但是根據這個performance analysis$('.txtClass');是最好的選擇之一。我正在使用JQuery 1.7.2 有沒有人對此有過解釋？Jquery元素+類選擇器性能

Performance analysis for class selectors

HTML

<div class="childDiv2"> 
    <input type="text" id="txtID" class="txtClass"/> 
    <p class="child">Blah Blah Blah</p> 
</div>

$('.txtClass'); 
$('#childDiv2 .txtClass') 
$('#childDiv2 > .txtClass') 
$('input.txtClass') 
$('#childDiv2 input.txtClass')

來源

2012-07-28 Lanka

由於id必須是唯一的，所以最快的方法是'$（「＃txtID」）' – Andreas 2012-07-28 06:56:26

我的關注點是按類選擇場景？ – Lanka 2012-07-28 07:03:49

偉大的問題。我沒有答案，但很奇怪，即使給出上下文$（'。txtClass'，'＃childDiv2'）仍然比類選擇器慢。 – 2012-07-28 07:16:51

現代瀏覽器暴露的非常有效的方法getElementsByClassName()返回具有給定類的元素。這就是爲什麼一個類選擇器在你的情況下更快。

爲了詳細說明你的例子：

$(".txtClass")     => getElementsByClassName() 

$("#childDiv2 .txtClass")  => getElementById(), 
            then getElementsByClassName() 

$("#childDiv2 > .txtClass")  => getElementById(), 
            then iterate over children and check class 

$("input.txtClass")    => getElementsByTagName(), 
            then iterate over results and check class 

$("#childDiv2 input.txtClass") => getElementById(), 
            then getElementsByTagName(), 
            then iterate over results and check class

正如你所看到的，這是很合乎邏輯的第一種形式是最快的現代瀏覽器。

來源

2012-07-28 07:23:41

所以我可以告訴的是幾乎在網上找到的每個jQuery性能教程都是不正確的。即使是一些jquery人的教程，如[Addy Osmani]（http://addyosmani.com/jqprovenperformance/） – Lanka 2012-07-28 07:41:57

@Lanka，也許不是*不正確*，只是*過時*。技術進步，今天最好的績效建議可能會在明年出錯。基準，另一方面，會給你最新的數字。 – 2012-07-28 07:46:34

是的，這是正確的。其實我以前的評論是錯誤的。那傢伙已經在幻燈片中解釋了它。 – Lanka 2012-07-28 07:56:37

CSS選擇器從右向左被解析。所以你的例子

$('#childDiv2 .txtClass')

將採取兩項行動來完成。首先找到類txtClass的所有元素。然後檢查每個元素是否爲childDiv2的元素的子元素。

$('.txtClass')

這個選擇器只需要一個動作。找到類txtClass

所有元素都在css-tricks.com看看this article

來源

2012-07-28 07:24:26 Andreas

據我所知，嘶嘶聲優化此查詢。所以它的工作方式與你的解釋不同。它首先選擇childDiv2，然後在其子節點中搜索txtClass。 – Lanka 2012-07-28 15:35:03

實際上，顯示的第一個代碼行需要檢查每個.txtClass元素以查看它是否是＃childDiv2的DESCENDANT。這需要檢查每個.txtClass的所有祖先。 – ToolmakerSteve 2014-08-14 05:49:19

var obj = document.getElementById("childDiv"); 
xxx = obj.getElementsByClassName("txtClass");

是30倍快。

http://jsperf.com/selectors-perf/6

來源

2013-03-12 18:14:51 klaus

看起來它也取決於與該類型的元素中的類的元件的密度。

我使用JQuery 1.10.1運行Google Chrome 30.0.1599.69版的測試。隨意嘗試在另一個瀏覽器和/或使用另一個JQuery版本。

我試圖運行以下測試：

稀疏（div的10％有類）link to the test on jsbin
密集（90％div的有類）link to the test on jsbin

貌似在密集的情況下div.class勝，但在稀疏案例.class勝。

來源

2013-10-16 13:56:40 Alexander

像提到密集/稀疏的評論一樣，這經常被忽視。如果可以的話，除了使用身份證之外，沒有銀彈。 – 2015-12-15 10:35:13

Jquery元素+類選擇器性能

回答

相關問題