爲什麼.classname比element.classname糟糕

有人可以幫我解釋一下：爲什麼.classname比element.classname糟糕

#id .classname

是有過之而無不及：

#id element.classname

來自渲染/性能的角度？

來源

2011-12-14 Jason T Featheringham

因爲在DOM致力於找到自己的標籤名稱在樹中的所有元素的特殊功能（getElementByTagName）。這些函數使用查找表並進行了優化。但是，對於類名不存在這樣的方法，並且查找類名稱需要遍歷所有樹並檢查現有的類名。通過減少要迭代的樹的大小，可以更快地實現該算法，並且使用element.前綴可以做到這一點：它可以減小樹的大小以查找類名。

來源

2011-12-14 13:08:25 solendil

但瀏覽器不會查找適用於，它會檢查該規則適用於每個元素... – Guffa

@solendil每個CSS規則元素：那爲什麼http://code.google.com/intl/es-ES /speed/page-speed/docs/rendering.html說：「刪除冗餘限定符這些限定符是多餘的： *通過類和/或標籤選擇符合格的ID選擇符，* 通過標籤選擇符限定的類別選擇符僅用於一個標籤，無論如何，這是一個很好的設計實踐）。「具體來說，第二個要點。 –

@Jason：對於ID很明顯，ID應該是唯一的，所以它們在查找地圖中，任何後續的選擇器都無濟於事。對於類，我想當一個類只能被一個標記使用時，呈現引擎會對它進行一些優化......但是，指定元素不應該減慢它的速度......無論如何，我想這一切都是依賴於瀏覽器的，根據經驗法則，使用ID和元素通常比類更有效，並且組合選擇器會降低性能。 – solendil

只是因爲.classname必須檢查所有元件爲specifyed類名，而僅type.classname HAST檢查匹配指定類型的元素。

來源

2011-12-14 13:05:59 oezi

但瀏覽器不仰望每個CSS規則應用到的元素，它會檢查該規則適用於每個元素.. – Guffa

-1這個答案是不是在所有相關這個問題，因爲在應用CSS規則時沒有元素查找。瀏覽器檢查哪些規則適用於某個元素，而不是規則適用的元素。 – Guffa

-2

不要overoptimize你的代碼，說清楚（這只是關於你和你的習慣，或者你的團隊的標準），並看到以後的表現。

當你的CSS選擇器將是你的瓶頸，那麼你就會有1級000的工程師爲你工作。

來源

2011-12-14 13:06:59

這個問題不在於是否擔心表現。 –

@JasonTFeatheringham「從渲染/性能角度？」嗯有點，我的回答是「不，這不是因爲它太少，你應該關心它，只關心你的代碼的清晰度」。 –

我真的很關心大O的角度，而不是一個真正的用例。 –

我認爲，因爲在第一個示例中，瀏覽器渲染引擎應搜索#id元素中的類classname的每個元素。

因爲發動機看起來就像每個元素element與該類第二個例子會更快。

很抱歉的文字遊戲，但是這應該是不影響從性能的角度。

來源

2011-12-14 13:08:27 Simone

但瀏覽器不會查找要應用每個CSS規則的元素，它會檢查哪些規則適用於每個元素... – Guffa

它不是。

對於第一個選擇器，瀏覽器檢查一個元素是否具有該類，然後檢查是否有任何後裔具有該id。

對於第二個選擇器，瀏覽器檢查一個元素是否具有該類，然後如果檢查該元素是否與標記名稱匹配，則檢查是否有任何後裔具有該id。

如果選擇器具有相同的效果，第一個選擇器是更好，因爲瀏覽器必須執行更少的檢查以匹配規則。

來源

2011-12-14 15:07:40 Guffa

爲什麼.classname比element.classname糟糕

回答

相關問題