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 的分析效率。