CSS和jQuery選擇速度

在jQuery中，每當我遇到這樣的事情：CSS和jQuery選擇速度

$("div#MyDiv").....

我一般說開發商：「不要打擾把div在#MyDiv前，ID選擇器是最快的。「即

$("#MyDiv")....

這是因爲後者將直接掛接到document.getElementById而不必首先掃描所有<div>元件的DOM。

我的問題是，相同的規則是否適用於CSS選擇器？即而不是：

div#MyDiv 
{ 
}

它更快擁有簡單？：

#MyDiv 
{ 
}

（我知道CSS選擇上有極大優勢，無論如何，所以在現實中既不會讓一個顯著差異。）

非常感謝

編輯

任何鏈接或引用可能對本討論的目的有用。謝謝:-)

來源

2010-11-04 James Wiseman

考慮以下情況：$（「... ... ...」）。find（「＃foo」）。哎喲。突然之間，斷言經歷了頂點（我不知道這種情況實際上是如何工作的。）無論如何，*上面的兩個CSS規則具有不同的優先級*（符合標籤的表格只是略高一點）。 – 2010-11-04 08:57:04

@pst - 不知道我關注。你能擴展嗎？ – 2010-11-04 08:58:12

請考慮元素尚未附加到文檔的情況。（怎麼* * jQuery處理這個？雖然與最終問題沒有關係。） – 2010-11-04 08:59:25

我想說它是極不可能它使任何現實世界的差異。理論上，是的，所需的支票少了（因爲根據the spec，div#foo確實需要div以匹配選擇器）。但它在真實世界的瀏覽器應用程序中產生真正的差異的機率？接近零。

這就是說，我總是當我在HTML應用程序中看到像div#foo這樣的東西時就會畏縮。 HTML只有一個ID型屬性（id），所以不需要進一步的限定。您可以使CSS選擇器引擎（瀏覽器或jQuery's）更加努力地弄清楚您的意思，讓選擇器變得脆弱（例如，如果div變成footer）等等。，當然你做讓你自己打開一個stoopid選擇器實現，不能識別它可以看到東西的ID和然後檢查，看看它是否是div，所以去通過所有的div s看。（這樣的實現是否存在？可能，你永遠不知道。）除了一些邊緣案例，它總是讓我覺得有人不知道他們在做什麼。

所以對我來說，速度不是主要的論點。毫無意義。 ;-)

來源

2010-11-04 09:00:28

那麼，你*可以*擁有一個帶有'p＃foo'的頁面和*帶有'div＃foo'的另一個*頁面，這兩個頁面都包含相同的Javascript，並且您只希望腳本適用於'div＃ foo' ...這不是說這是一個理智的腳本或標記，而只是說...; o） – deceze 2010-11-04 09:25:20

@deceze：當然，這將是我談論的邊緣案例之一。（如果您希望在頁面上允許高級支持HTML的用戶內容，並根據它是否是'div'或'span'等不同風格， – 2010-11-04 12:32:27

是的這是因爲解析速度更快，因爲瀏覽器不能檢查元素是否也是<div>。（對於一些規則，速度差是用戶無法感知的）

來源

2010-11-04 08:53:56

那麼......任何基準？ – 2010-11-04 08:55:16

http://code.google.com/intl/it-IT/speed/page-speed/docs/rendering.html – 2010-11-04 08:56:17

根據this Mozilla article，它確實有所不同，儘管是一分鐘。（請注意，雖然是本文討論的造型XUL用戶界面，Gecko排版引擎用於既呈現Firefox的用戶界面和它加載網頁。）

的ID是爲了適用於單個元素DOM，所以試圖匹配標籤名稱所帶來的性能損失是完全不必要的，無論是否重要。更不用說它會浪費你的樣式表中的幾個字節。

來源

2010-11-04 08:56:16 BoltClock

儘管這篇文章沒有用任何數據進行備份。 – 2010-11-04 08:59:03

@ T.J。克勞德：是的，不幸的。這是我現在可以找到的。 – BoltClock 2010-11-04 09:00:53

CSS和jQuery選擇速度

回答

相關問題