更快的兩個CSS規則：有/沒有指定多個ID

所以我最近在Concrete5上做了很多工作。我注意到，不過，默認的主題已經被像這樣定義許多 CSS規則：更快的兩個CSS規則：有/沒有指定多個ID

#page #central #sidebar p{line-height:24px}

由於「側邊欄」是一個ID應該只有一個整頁的「側邊欄」（假設它驗證，我正在照顧它）。因此，如果#sidebar在#page #central中，它應該總是在#page #central。無論。在每一頁上。

通過這樣的邏輯，以下規則不完全一樣的事情：

#sidebar p{line-height:24px}

測試這一點，果然，它的工作。所以我的問題是 - 哪個會有更好的表現？有沒有速度相關的原因，Concrete5團隊採用更長的規格，還是僅僅是爲了幫助未來的開發者找到#sidebar div？無論哪種情況，我都可以看到它的速度更快。

如果殼體1更快（#page #central #sidebar）：

如果瀏覽器使用廣度優先搜索算法來定位適當的DOM元素，然後找到#sidebar將涉及搜索的EVERY DOM元素的第二層，它在到達第三層之前有孩子，在找到#sidebar之前，它仍然會有幾個元素。通過以這種方式指定元素，廣度優先搜索將識別#page並且知道它只需要在此元素內繼續搜索，而不是繼續整個DOM。

如果殼體2是更快（#sidebar）：

如果瀏覽器搜索的順序整個文檔它的寫入，而不是處理DOM就像一棵樹，那麼這將是執行單個線性搜索，而不是三個線性搜索。事實上，即使在最好的情況下，它足夠聰明，可以識別先前找到的DOM元素的開始點和結束點（基本上是深度優先搜索），但它仍然需要讀取儘可能多的代碼行一個線性搜索 - 首先它會讀取，直到找到#page，那麼它將開始從#page開始讀取，直到它找到#center，然後它會從#center開始讀取，直到找到#sidebar。唯一的區別就是從一個搜索切換到另一個搜索時涉及的微量開銷

來源

2011-01-24 stevendesu

小故事：你使用的任何東西越多，解析速度就越慢。

ID總是唯一的，所以你應該只使用一個;但即使是類，指定任何其他元素或標準總是會變得更慢。

http://css-tricks.com/efficiently-rendering-css/

這篇文章遠遠更深入到究竟你是問什麼。

來源

2011-01-24 05:32:21 scragz

拋開性能問題，這些並不總是翻譯成相同的東西。

#header { 
    background: blue; 
} 

#home #header { 
    background: red; 
}

這是一個完全有效的級聯使用，使一個頁面看起來不同於另一個。我始終使用此模式，通常是因爲我將class或id指定給我的body元素，作爲CSS和JavaScript的鉤子。

來源

2011-01-24 05:26:26 alex

我確實意識到這一點，但我並未打算刪除特殊格式所需的任何元素。例如，`#page #central＃main`和#page＃central.leftSidebar＃main`這兩行分別替換爲`＃main`和`.leftSidebar＃main`。這樣我使用最少數量的規格，同時仍然保持格式。 – stevendesu 2011-01-24 13:24:05

我不知道性能，我也不關心，但把多個ID選擇在一起肯定是從只使用一個ID選擇意味着不同的，而且我敢肯定人們並不鏈選擇一樣，出於性能的原因比什麼都重要。

#page #central #sidebar p

這僅發現p在#sidebar如果#sidebar是在#central其內部#page。因此，不會發現這些#sidebar S：

<body> 
    <div id="sidebar"></div> 
</body> 

<body> 
    <div id="page"> 
     <div id="sidebar"></div> 
    </div> 
</body> 

<body> 
    <div id="central"> 
     <div id="sidebar"></div> 
    </div> 
</body>

同樣，不知道性能，但當然，瀏覽器就到這裏做更多的工作，因爲它必須檢查DOM層次結構中的每個元素，因爲它從右到左解析這個選擇器。這是一個真正的原因;如果您的CSS只是在#page #central中發現了樣式#sidebar，那麼瀏覽器必須在嘗試應用樣式之前執行這些檢查。

#sidebar p

此發現p在#sidebar，無論在DOM#sidebar可以位於其中。

而且，也許我誤解你的問題，但對於這樣的：

由於「側邊欄」是一個ID應該只有一個整頁的「側邊欄」（假設它驗證，這是我」小心照顧它）。因此，如果#sidebar在#page #central中，它應該總是在#page #central。無論。在每一頁上。

不，並不總是如此。您可以將#sidebar放置在任何地方，只是具有全部三個ID的選擇器只會在 當中生效，並且它生活在#page #central中。滿足您的假設的唯一方法是確保您的標記的結構是這樣的。你的樣式不能也不會知道你的標記，特別是如果它被用來在一個站點上設置多個頁面的風格。這樣說，如果你可以確保你的標記總是包含#page #central #sidebar在那個結構中，那麼單獨選擇#sidebar沒有問題。我的觀點是，不同的選擇器意味着不同的事情，並且出於性能原因你不會選擇其中之一 - 更常見的是，它不是那樣。

來源

2011-01-24 05:26:59 BoltClock

我的想法ID必須是唯一的。 – Starx 2011-01-24 05:40:30

@Starx：您傾向於使用樣式表來設置網站中多個頁面的樣式;不是每個頁面都將具有完全相同的結構或ID'd元素;例如在主頁中，`body`可能有一個類或ID爲`home`。這就是多個班級/ ID選擇器派上用場的地方。 – BoltClock 2011-01-24 05:42:04

我的壞...我沒有注意到單獨的身體標籤：D – Starx 2011-01-24 06:58:51

AFAIK沒有可行的方法來測試瀏覽器的CSS匹配算法的速度，以及#page #central #sidebar和#sidebar之間的區別就速度而言是如此微不足道以至於不值得擔心。

什麼是值得擔心的是specificity的區別。

有時候值得在選擇器中添加一個額外的id/class /元素，以確保樣式不會被後面級聯中的簡單選擇器錯誤覆蓋。

#page #central #sidebar p具有3-0-1的特異性，而#sidebar p具有1-0-1的特異性，這意味着#page #central #sidebar p將優先。

另外，你提到：

...如果#sidebar是#page #central，它應該永遠是#page #central。無論。在每一頁上。

這是非常不是這種情況，並且瞭解原因很重要。僅僅因爲id是唯一的，並不意味着它必須遵循每個頁面上的相同頁面結構的確切。例如：一個受歡迎的內容管理系統（Drupal）允許開發者指定在不同頁面的不同區域上放置塊的規則。我可能希望#search-block位於主頁上的#header，然後是所有其他頁面中的#sidebar。使用更具體的選擇器將允許我根據它的父容器是什麼給#search-block不同的樣式。

來源

2011-01-24 05:32:05 zzzzBov

更快的兩個CSS規則：有/沒有指定多個ID

回答

相關問題