1、盡可能的除去空白區(qū)域

一般而言，空白區(qū)域字符（空格、制表符、換行符等）都可以安全刪除。

2、除去注釋

除了在客戶端給IE和doctype聲明的條件注釋外，幾乎所有的注釋都可以安全去除掉。

3、使用最短格式的顏色表示

使用顏色時，不要一股腦的使用十六進(jìn)制或全顏色名稱(full color name)，要盡可能根據(jù)實際情況使用最短格式的顏色表示。比如，一個為#ff0000 的顏色屬性可以直接用red來說明，而LightGoldenRodYellow可以換成 #FAFAD2。

4、 除去無用的標(biāo)簽

有些‘垃圾’markup，比如使用了多次的重復(fù)標(biāo)簽或者某些編輯器里用作廣告的meta標(biāo)簽，都可以安全地被刪除。 

5、對CSS的規(guī)則進(jìn)行合并、減少或刪除

CSS中的諸如字體大小、字體重量等規(guī)則往往可以使用一種單屬性字體的速記注釋方式來表示。使用得當(dāng)?shù)脑?，這個技巧可以讓您把如下的規(guī)則：

p {font-size: 36pt;
font-family: Arial;
line-height: 48pt;
font-weight: bold;}

改寫成下面簡短的形式：

p{font:bold 36pt/48pt Arial;}

如果繼承方法使用得當(dāng)?shù)脑挘€會發(fā)現(xiàn)在樣式表單中的一些規(guī)則可以顯著的減少或干脆刪掉。到目前為止尚沒有能自動移除規(guī)則的工具，所以只能通過手工調(diào)整CSS向?qū)?Wizard)來進(jìn)行這些工作。

6、對類和ID值進(jìn)行重命名

在CSS優(yōu)化中最危險的動作可能是重命名類或ID值了。看看如下規(guī)則：

.superSpecial {color: red; font-size: 36pt;}

可將其更名為sS。

7、合并你的css文件

根據(jù)“盡可能的減少HTTP的Request請求數(shù)”準(zhǔn)則我們知道，那樣的確是不合理的，因為那樣會產(chǎn)生更多的HTTP的Request請求數(shù)。從而降低網(wǎng)頁的效率。所以，從提高網(wǎng)頁效率的角度上而言，我們還是應(yīng)該將所有的css寫在同一個css文件中。但是問題又來了。那么怎么來很好的組織和規(guī)劃樣式表呢？這的確是個矛盾。我現(xiàn)在的做法是采用兩套版本。編輯版和發(fā)布版。編輯版仍然使用多個css文件以便于規(guī)劃和組織。而等到發(fā)布的時候，再將多個css文件合并到一個文件中去，從而達(dá)到減少HTTPRequest請求數(shù)的目的。

8、Put CSS at the Top

無論是HTML還是XHTML還是CSS都是解釋型的語言，而非編譯型的。所以把CSS放到上方的話，那么瀏覽器解析結(jié)構(gòu)的時候，就已經(jīng)可以對頁面進(jìn)行渲染。這樣就不會出現(xiàn)，頁面結(jié)構(gòu)光禿禿的先出來，然后CSS渲染，頁面又突然華麗起來，這樣太具有“戲劇性”的頁面瀏覽體驗了。

9、Avoid CSS Expressions

首先有必要先說明一下CSS Expressions是什么一個東西。其實它就像其它語言中的if……else……語句。這樣在CSS中就可以進(jìn)行簡單的邏輯判斷了。舉個簡單的例子:

<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>

10、Make JavaScript and CSS External

如果從HTTP的request請求數(shù)來講的話，這樣做的確是降低了效率。但是之所以這么做，是因為另外一個重要的考慮因素——緩存。因為外部的引用文件會被瀏覽器緩存，所以如果javascript和css體積較大的時候，我們將它們獨立成外部文件。這樣當(dāng)用戶只要瀏覽一次以后，這些體積較大的js和css文件就能被緩存起來，從而極高地提高用戶再次訪問時的效率。

JS 網(wǎng)站性能優(yōu)化筆記

最新評論