CSS 網站性能優化筆記
2024-07-11 08:47:33
供稿：網友
1、盡可能的除去空白區域
一般而言，空白區域字符（空格、制表符、換行符等）都可以安全刪除。
2、除去注釋
除了在客戶端給IE和doctype聲明的條件注釋外，幾乎所有的注釋都可以安全去除掉。
3、使用最短格式的顏色表示
使用顏色時，不要一股腦的使用十六進制或全顏色名稱(full color name)，要盡可能根據實際情況使用最短格式的顏色表示。比如，一個為#ff0000 的顏色屬性可以直接用red來說明，而LightGoldenRodYellow可以換成 #FAFAD2。
4、 除去無用的標簽
有些‘垃圾’markup，比如使用了多次的重復標簽或者某些編輯器里用作廣告的meta標簽，都可以安全地被刪除。
5、對CSS的規則進行合并、減少或刪除
CSS中的諸如字體大小、字體重量等規則往往可以使用一種單屬性字體的速記注釋方式來表示。使用得當的話，這個技巧可以讓您把如下的規則：
p {font-size: 36pt;
font-family: Arial;
line-height: 48pt;
font-weight: bold;}
改寫成下面簡短的形式：
p{font:bold 36pt/48pt Arial;}
如果繼承方法使用得當的話，您還會發現在樣式表單中的一些規則可以顯著的減少或干脆刪掉。到目前為止尚沒有能自動移除規則的工具，所以只能通過手工調整CSS向導(Wizard)來進行這些工作。
6、對類和ID值進行重命名
在CSS優化中最危險的動作可能是重命名類或ID值了?？纯慈缦乱巹t：
.superSpecial {color: red; font-size: 36pt;}
可將其更名為sS。
7、合并你的css文件
根據“盡可能的減少HTTP的Request請求數”準則我們知道，那樣的確是不合理的，因為那樣會產生更多的HTTP的Request請求數。從而降低網頁的效率。所以，從提高網頁效率的角度上而言，我們還是應該將所有的css寫在同一個css文件中。但是問題又來了。那么怎么來很好的組織和規劃樣式表呢？這的確是個矛盾。我現在的做法是采用兩套版本。編輯版和發布版。編輯版仍然使用多個css文件以便于規劃和組織。而等到發布的時候，再將多個css文件合并到一個文件中去，從而達到減少HTTPRequest請求數的目的。
8、Put CSS at the Top
無論是HTML還是XHTML還是CSS都是解釋型的語言，而非編譯型的。所以把CSS放到上方的話，那么瀏覽器解析結構的時候，就已經可以對頁面進行渲染。這樣就不會出現，頁面結構光禿禿的先出來，然后CSS渲染，頁面又突然華麗起來，這樣太具有“戲劇性”的頁面瀏覽體驗了。
9、Avoid CSS Expressions
首先有必要先說明一下CSS Expressions是什么一個東西。其實它就像其它語言中的if……else……語句。這樣在CSS中就可以進行簡單的邏輯判斷了。舉個簡單的例子:
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
10、Make JavaScript and CSS External
如果從HTTP的request請求數來講的話，這樣做的確是降低了效率。但是之所以這么做，是因為另外一個重要的考慮因素——緩存。因為外部的引用文件會被瀏覽器緩存，所以如果javascript和css體積較大的時候，我們將它們獨立成外部文件。這樣當用戶只要瀏覽一次以后，這些體積較大的js和css文件就能被緩存起來，從而極高地提高用戶再次訪問時的效率。
JS 網站性能優化筆記
