CSS代碼的分析與渲染都是由瀏覽器來完成的，所以，瞭解瀏覽器的CSS工作機制對我們的優化有至關重要的作用，本文主要從一下幾個方面來介紹CSS的性能優化：
1. style標籤的相關調優
2. 特殊的CSS樣式使用方式
3. CSS縮寫
4. CSS聲明
5. CSS選擇器
1.把stylesheets放在HTML頁面頭部：
瀏覽器把所有的stylesheets加載完成後纔會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面的任何內容，頁面會一直呈現空白。這也是爲什麼要把stylesheets放在頭部的原因。如果放在HTML頁面底部，頁面渲染就不僅僅是在等待stylesheet的加載，還要等待html內容加載完成，這樣一來，用戶看到的頁面的時間會更晚。
對於 @import 和 <link> 兩種加載外部 CSS 文件的方式：@import 就相當於是把 <link> 標籤放在頁面的底部，所以從優化性能的角度看，應該儘量避免使用 @import 命令
2. 特殊的CSS樣式使用方式（避免使用 CSS Expressions，避免使用 Filter）
3. CSS縮寫
CSS 縮寫可以讓你用極少的代碼定義一系列樣式屬性，這種做法可以極大程度的縮減代碼量以達到提高性能的目的。
color縮寫
關於顏色，重複的屬性值可以省略。
#000000 ------>> #000 #336699 ------>> #369
各種縮寫方式
Margin-top: 2px; Margin-right: 5px; Margin-bottom: 2em; Margin-left: 15px; ----->> Margin: 2px 5px 2em 15px; Border-width: 1px; Border-style: solid; Border-color: #000 ----->> border: 1px solid #000 Font-style: italic; Font-variant: small-caps; Font-weight: bold; Font-size: 1em; Line-height: 140%; Font-family: sans-serif; ----->> font: italic small-caps bold 1em 140% sans-serief Background-color: #f00; Background-p_w_picpath: url(background.gif); Background-repeat: no-repeat; Background-p_w_upload: fixed; Background-position: 0 0; ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 list-style-type: square; list-style-position: inside; List-style-p_w_picpath: url(p_w_picpath.gif) ----->> list-style: square inside url(p_w_picpath.gif)
4. CSS聲明
這種 Class 簡寫的方式可以極大的縮減我們的代碼，提高瀏覽器分析識別的效率。
.Class1{position: absolute; left: 20px; top: 30px;}
.Class2{position: absolute; left: 20px; top: 30px;}
.Class3{position: absolute; left: 20px; top: 30px;}
.Class4{position: absolute; left: 20px; top: 30px;}
.Class5{position: absolute; left: 20px; top: 30px;}
.Class6{position: absolute; left: 20px; top: 30px;}
-------------------->>>>>>>
.class1 .class2 .class3 .class4 .class5 .class6{
Position: absolute; left: 20px; top: 20px;
}5. CSS選擇器
a. child selector
#toc > li {font-weight: bold}按照我們慣常的理解，編譯器應該是先查找 id 爲“toc”的節點，然後在他的所有直接子節點中查找類型（tag）爲“li”的節點，將“font-weight”屬性應用到這些節點上。
但是，不幸的是，恰恰相反，瀏覽器是“從右往左”來分析 class 的，它的匹配規則是從右向左來進行匹配的。這裏，瀏覽器首先會查找頁面上所有的“li”節點，然後再去做進一步的判斷：如果它的父節點的 id 爲“toc”，則匹配成功。
由此可知，CSS 選擇器的匹配遠比我們想象的要慢的多，CSS 的性能問題不容忽視。
b. Descendant selector
#toc li {font-weight: bold}這個效率比之前的“child selector”效率更慢，而且要慢很多。瀏覽器先便利所有的“li”節點，然後步步上溯其父節點，直到 DOM 結構的根節點（document），如果有某個節點的 id 爲“toc”，則匹配成功，否則繼續查找下一個“li”節點。
c. 儘量避免 universal rules
[hidden="true"] { ... } /* A universal rule */這裏的匹配規則很明顯：查找頁面上的所有節點，如果有節點存在“hidden”屬性，並且其屬性值爲“true”，則匹配成功。這是最耗時耗力的匹配，頁面上的所有節點都需要進行匹配運算，這種規則應儘量避免。
d. Id-categorized 規則與 tag name 或 class 規則並行
button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon這裏，按照我們常規的理解，箭頭左邊的寫法似乎是應該更快的，因爲它的限制更多。其實不然，id 是全局唯一的，在匹配 CSS 選擇器時瀏覽器定位到 id 是最快的，如果伴隨有其他的非 id 的 selector，反而會影響匹配的效率。
e. 關於 class-categorized 規則
button.indented {...}----->>.button-indented {...}程序員們經常會給某個 Class 前面加上標籤名稱（Tag Name），以更精確且快速的定位該節點，但是這樣往往效率更差。和清單 8 中的原理一樣，頁面上的 class 在全局範圍內來講應該是唯一的，用唯一的 Class 名稱來定位一個節點往往比組合定位更加快捷。事實上，這種做法也可以避免由於開發修改頁面元素的類型（Tag）而導致的樣式失效的情況，做到樣式與元素的分離，兩者獨立維護。
f. 儘量減少規則數量
Span[mailfolder="true"] > table > tr > td.columnClass {...}
------------------->>>>>>>
.span-mailfolder-tbl-tdCol {...}規則越多，匹配越慢，上面一種規則需要進行 6 項匹配，先找“columnClass”，再找“td”，然後是“tr”，“table”，最後是符合“mailfolder”爲“true”的 span，這種效率是非常慢的。如果用一個比較特殊的 class 替代（span-mailfolder-tbl-tdCol），效率會快上好幾倍。
g. 儘量避免使用 descendant selector
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}Descendant 選擇器是耗時相對高的選擇器，通常來講，它在 CSS 裏的使用應該是儘量避免的，如果能用 child 選擇器替代就應該儘量這樣去做。
h. 利用 CSS 的繼承機制
Color
Font
Letter-spacing
Line-height
List-style
Text-align
Text-indent
Text-transform
White-space
Word-spacing
#bookmark > .menu-left {list-style-p_w_picpath: url(blah)}
------------>>>>>>>>
#bookmark {list-style-p_w_picpath: url(blah)}在 CSS 中，有很多 CSS 的屬性以可以繼承的，如果某個節點的父節點已經設定了上述的 CSS 樣式（如：color, font 等 ...），並且子節點無需更改該樣式，則無需再作相關設定，同時，也可以利用這一點：如果很多子節點都需要設定該 CSS 屬性值，可以統一設定其父節點的該 CSS 屬性，這樣一來，所有的子節點再無需做額外設定，加速了 CSS 的分析效率。