jquery和CSS中最快的選擇器方法 - ID或不？

Question

jquery / javascript中最快的是什么？

$('#myID .myClass')

要么

$('.myClass')

什么是最好在CSS中使用？

#myID .myClass{}

要么

.myClass{}

我現在看到我應該更好地解釋。 抱歉!

Ofceauce ID是CSS和JavaScript中更快的選擇器。 但有時你需要使用類，因為有多個選擇器。

例如，我有我的大HTML文檔。 在頁面中間我有：

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

如果我想要定位所有“myClass”。 那么在定位類之前定位ID會更好嗎？ （然后我不必對整個HTML文檔進行domtravel）例如：

這會是：

$（ '＃身份識別碼'）。找到（” MyClass的）

要快於：

$（” MyClass的）

Answer 1

我對現代瀏覽器的測試表明你應該選擇其中之一，

$('#id').find('.class') // or
$('.class')

但不是

$('#id .class')

原因是所有現代瀏覽器都實現了getElementsByClassName導致按類名進行幾乎恆定的時間查找（假設是哈希實現）。 哪種瀏覽器是現代的另一個主觀問題。

Answer 2

它們在大多數現代瀏覽器中大致相同，因為類名在內部進行哈希處理。 不同之處在於較舊的瀏覽器沒有.getElementsByClassName或等效方法，因此.myClass在內部被解析為jQuery，並且dom中的每個元素.myClass被.myClass並檢查了類名（或者它在可能的情況下使用XPath）。

總是嘗試盡可能使用#myID .myClass ，因為它允許jQuery直接跳轉到#myID並在必要時從那里遍歷。

Answer 3

讓我們暫時從邏輯上思考這一點，假裝你不知道瀏覽器是如何在內部構建的，或者它是如何訪問DOM的，但你認為無論它做什么都是合乎邏輯的。

因此，是否有理由認為，在兩個選擇器中，最窄的選擇器會更快找到結果？

你有兩個選擇器，翻譯成粗糙的英語

1. myClass類的任何元素，它是ID為myID的元素的子元素
2. myClass類的任何元素

至於“什么是最好在CSS中使用”，這是完全主觀的，因為它取決於你是否打算定位.myClass 所有實例或只是那些#myID子#myID 。

Answer 4

好的問題其實。

假設您已經解析了D個最大深度的N個元素和S個規則的CSS的DOM。 然后，為所有元素找到樣式的任務具有大致為O(N*D*S)計算復雜度。

顯然，並非所有CSS選擇器都具有相同的計算復雜度。

例如， li.item選擇器和li[class ~= "item"]需要完全相同的CPU資源。 li[class = "item"]可以更快地計算，因為它不需要掃描空格。

＃1選擇器在這里：

#myID .myClass{} /* #1 */
.myClass{} /* #2 */

需要更多的CPU資源，因為您需要完成與情況＃2完全相同的工作量，您需要掃描父/子鏈（最大D元素）以找到具有“myID”的元素。

這完全是關於純CSS選擇器。

在jQuery和朋友的情況可能會有點不同。 從理論上講，jQuery引擎可以使用document.getElementById()來最小化查找集（因此減少N數），但這與CSS行為不匹配。 這是一個例子： http ： //jsfiddle.net/dnsUF/ 。 這里jQuery用#foo報告一個元素，但實際上有兩個這樣的元素。

恢復：

• 在CSS情況下＃2更快
• 在jQuery情況下＃1可以更快（但在CSS意義上技術上可能不正確）。

這是我關於CSS選擇器復雜性的文章： http ： //www.terrainformatica.com/2008/07/csss-and-computational-complexity-of-selectors/這是如何通過使用樣式集來改進它： http： //www.terrainformatica.com/2010/09/style-sets-in-h-smile-core/

Answer 5

ID始終是訪問元素的最快方式，因為它們是唯一的。

Answer 6

是的，id是訪問元素的最快方法之一。 看看這個測試http://mootools.net/slickspeed/ 。

Answer 7

假設您有許多應用.myClass元素， #myID .myClass絕對是訪問該元素的更好方法。

Answer 8

更新 - 2015年 - 在這里檢查自己
https://jsperf.com/id-vs-class-vs-tag-selectors/2

TL; DR;

使用ID $（“＃foo”）比我在linux 64bits上的chrome 41上的CSS $（“。bar”）快4倍