CSS對Web頁面載入效率的影響分析摘要_經驗交流

我們羅列了十幾條相關的知識與注意點，大家可以係統的探討一下，讓我們寫的Web頁面開啟更加流暢。
請不要告訴我，你看不懂E文，只是你不願意看！！！

一、風格系統如何打破規則

1.1、ID 規則
第一類由那些以 ID 選擇器為鍵選擇器的規則所組成。

button#backButton { } /* 這是一條 ID 分類規則*/
#urlBar[type="autocomplete"] { } /* 這是一條 ID 分類規則*/
treeitem > Treerow>treecell#myCell:active{} /*這是一個ID 分類的規則*/
1.2、類別規則
如果一個規則指定了一個類別作為其鍵選擇器，那麼它就屬於這個類別。

button.toolbarButton { } /* 基於類別的規則 */
.fancyText { } /* 基於類別的規則 */
menuitem > .menu-left[checked="true"] { } /* 基於類別的規則*/
1.3、標籤規則
如果沒有將類別或ID 指定為鍵選擇器，則規則的下一個潛在類別是標籤類別。如果規則指定了一個標籤作為其鍵選擇器，則該規則屬於此類。

td { } /* 基於標籤的規則 */
treeitem > treerow { } /* 基於標籤的規則 */
input[type="checkbox"] { } /基於標籤的規則*/


:table { } /* 一般規則 */
[hidden="true"] { } /* 一般規則 */
* { } /* 一般規則*/ tree > [collapsed="true"] { } /* 通用規則*/
2、樣式系統如何匹配規則
樣式系統透過從最右邊的選擇器開始匹配規則，通過規則的選擇器向左移動。只要您的小子樹繼續簽出，樣式系統就會繼續向左移動，直到它匹配規則或因不匹配而退出。
您的第一道防線是根據鍵選擇器的類型進行的規則過濾。此分類的目的是過濾掉規則，以便您甚至不必浪費時間嘗試匹配它們。這是大幅提高效能的關鍵。您甚至需要檢查給定元素的規則越少，樣式解析速度就越快。舉例來說，如果您的元素有 ID，則只會檢查與您的元素 ID 相符的 ID 規則。只會檢查在您的元素上找到的類別的類別規則。只會檢查與您的標籤相符的標籤規則。通用規則將始終受到檢查。

確保規則不會出現在通用類別中！

3.2、不要使用標籤名稱或類別來限定 ID 分類規則
如果您有一個以 ID 選擇器作為其鍵選擇器的樣式規則，則不必費心將標籤名稱新增至規則。ID 是唯一的，因此您無緣無故地減慢了匹配速度。

複製程式碼程式碼如下：

BAD - button#backButton { }  
不好 - .menu-left#newMenuIcon { }  
好 - #backButton { }  
好 - #newMenuIcon{ }  
好 - #newMenuIcon不符合班級資格- 帶有標籤名稱的分類規則
與上面的規則類似，我們所有的類別都是唯一的。您應該使用的約定是在類別名稱中包含標籤名稱。

複製程式碼程式碼如下：

BAD - treecell.indented { }  
好- .treecell 縮排 { }  

3.4、試著將規則放入最具體的類別中！
我們系統速度緩慢的最大原因是標籤類別中有太多規則。透過為我們的元素添加類，我們可以進一步將這些規則細分為類類別，然後我們不再浪費時間嘗試為給定標籤匹配盡可能多的規則。


壞 - Treeitem[mailfolder="true"] > Treerow > Treecell { } 
好 - .treecell-mailfolder { } 
後代選擇器是 CSS 中最昂貴的選擇器。它非常昂貴，特別是如果使用選擇器的規則位於標籤或通用類別中。通常，真正需要的是子選擇器。未經皮膚模組所有者的明確批准，UI CSS 中禁止使用後代選擇器。

不好- Treehead Treerow TreeCell { } 
更好，但仍然不好（請參閱下一個指南） - Treehead > Treerow > TreeCell { } 
避免將子選擇器與標籤分類規則一起使用。對於該元素的所有出現，您將大大增加匹配時間（特別是如果規則很可能更頻繁地匹配）。


BAD - treehead > treerow > treecell { } 
BEST - .treecell-header { } 

3.7、質疑子選擇器的所有用法！
使用子選擇器時要小心。如果您能想出一種方法來避免必須使用它，那就這樣做。特別是，子選擇器經常與 RDF 樹和選單一起使用，如下所示。


BAD -treeitem[IsImapServer="true"]>treerow>.tree-folderpane-icon{}}
請記住，RDF 中的屬性可以在範本中複製！利用這一事實，在希望根據該屬性進行更改的子 XUL 元素上複製 RDF 屬性。


好 - .tree-folderpane-icon[IsImapServer="true"] { } 

3.8、依賴繼承！
了解哪些屬性可以繼承，並允許它們繼承！我們明確設定了 XUL 小部件，以便您可以在父標籤上放置清單樣式圖像（僅一個範例）或字體規則，並且它將過濾到匿名內容。您不必浪費時間編寫直接與匿名內容對話的規則。


不好 - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); } 
好 - #bookmarkMenuItem { list-style-image: url(blah);在上面的範例中，對匿名內容進行樣式化的願望（不理解清單樣式圖像繼承）導致了一條位於類別類別中的規則，而該規則實際上應該最終出現在最所有類別中的特定類別，即ID 類別。
請記住，尤其是匿名內容，它們都有相同的類別！上面的錯誤規則會導致檢查每個選單的圖示以查看它是否包含在書籤選單項目中。這是非常昂貴的（因為有很多菜單）；除了書籤菜單之外，任何菜單都不應該檢查這條規則。

3．9.使用-moz-image-region！
將一堆影像放入單一影像檔案中並使用 -moz-image-region 選擇它們的效果明顯優於將每個影像放入自己的檔案中。
原始文件資訊－作者：David Hyatt