首先，我們需要安裝Firefox（點(diǎn)擊此處下載）,或者確定你已經(jīng)安裝的版本已經(jīng)高于3.1;
第二步，安裝前端開(kāi)發(fā)人員最普及的開(kāi)發(fā)工具 Firebug；
第三步，安裝CSS Usage 0.2.2(寫(xiě)此文時(shí)的版本)；
第四步，在瀏覽器中打開(kāi)我們要優(yōu)化的頁(yè)面（本地的頁(yè)面也可以），點(diǎn)擊右下角的firebug小圖標(biāo)，打開(kāi)firebug工具窗口，我們會(huì)看到在工具選項(xiàng)中我們有一個(gè) CSS Usage工具的按鈕。

首先我們來(lái)分析最上面的三個(gè)功能按鈕的使用

Scan: 通過(guò)字面意思我們就能知道,這是一個(gè)掃描當(dāng)前頁(yè)面的工具,如果我們的站點(diǎn)只有一個(gè)頁(yè)面或者幾個(gè)頁(yè)面,我們可以通過(guò)使用此功能按鍵來(lái)查看頁(yè)面的css實(shí)用情況.

Clear: 清除掃描結(jié)果,但我們查看完網(wǎng)頁(yè),并對(duì)CSS 進(jìn)行了修改后,我們就不需要以前的掃描結(jié)果了,那么我們就可以使用Clear功能鍵,清除以前的掃描結(jié)果緩存,重新開(kāi)始我們的掃描.

AutoScan: 我們的網(wǎng)站可能會(huì)有很多的頁(yè)面,更有可能有很多的彈出層,如果我們每次都點(diǎn)擊掃描的話,會(huì)占用我們大量的時(shí)間,AutoScan功能鍵可以使我們的掃描工作更自動(dòng)化,提高我們的工作效率.

當(dāng)我們點(diǎn)擊Scan按鍵后會(huì)有什么樣的情況呢?我們以 獨(dú)臂老宋的博客為案例http://blog.sina.com.cn/laosong11
點(diǎn)擊Scan之后, CSS Usage會(huì)對(duì)當(dāng)前的頁(yè)面HTML和樣式進(jìn)行掃描,如下圖

上圖是我把掃描結(jié)果折疊后的樣子,我們可以看到,CSS Usage對(duì)頁(yè)面css樣式表的內(nèi)聯(lián)(inline)樣式和外鏈樣式進(jìn)行了掃描,HTML也作了掃描并顯示加載時(shí)間.

下面我們展開(kāi)一個(gè)內(nèi)聯(lián)樣式

我們能看到這一句Line CSS Selector Seen, Seen before, Unseen, :hover,告訴我們” 列出CSS選擇器的狀態(tài):
綠色–表示當(dāng)前掃描看到的,
深綠色–的以前的掃描中看到的,
紅色–的表示在當(dāng)前和以前掃描中均未發(fā)現(xiàn)的.
灰色–的代表偽類的選擇器CSS,這部分將會(huì)被忽視.
在這個(gè)列表的最下面,我們也會(huì)看到有個(gè)統(tǒng)計(jì),告訴我們有多少被發(fā)現(xiàn),多少?zèng)]有發(fā)現(xiàn),被忽視的是多少,CSS實(shí)用的覆蓋率是多少的統(tǒng)計(jì).

同時(shí),CSS Usage還提供給我們關(guān)于CSS某個(gè)選擇器被實(shí)用多少次的統(tǒng)計(jì)

如果我們一直使用 Auto Scan功能的話,我們的Scan次數(shù)也是在累積的,比如我們從首頁(yè)到博文目錄、再到圖片、最后到達(dá)關(guān)于我，每一次頁(yè)面跳轉(zhuǎn)，CSS Usage 都會(huì)自動(dòng)增加頁(yè)面的掃描次數(shù)。如下圖：

如果你想知道，我們都是在哪些頁(yè)面進(jìn)行的掃描，是不是覆蓋到了所有的頁(yè)面，你可以看到關(guān)于頁(yè)面的掃描記錄

如果我們僅僅是給CSS減肥的話,那我們就可以對(duì)紅色的選擇器開(kāi)始動(dòng)手了,CSS Usage給我們提供了一個(gè)更智能的工具, export cleaned css(導(dǎo)出清理后的CSS).但是直接使用這個(gè)工具對(duì)很多大型網(wǎng)站來(lái)說(shuō)都需要勇氣,我的建議還是保險(xiǎn)一些的好,我們可以選擇選擇器的名稱,通過(guò)文件夾的搜索功能,來(lái)查找這個(gè)css選擇器的樣式是不是已經(jīng)作為下線 產(chǎn)品或者組件的組成部分,已經(jīng)沒(méi)有作用.或許我們?cè)谝粋€(gè)旮旯又 發(fā)現(xiàn)了它 ,那樣我們只是當(dāng)時(shí)出了冷汗,而不必等修改的文件上線后再出冷汗.

我們還要提一下這個(gè)工具的缺點(diǎn)：
如果網(wǎng)站使用了大量的ajax和dhtml的話，你需要盡可能多地打開(kāi)那些隱藏的div/窗口和tab,讓Css Usage爬取盡可能多的內(nèi)容。
如果我們的網(wǎng)站頁(yè)面數(shù)量很多的話，占用CPU和內(nèi)存會(huì)比較大，需要足夠的耐心。

我們本文只是介紹了關(guān)于移除無(wú)效CSS選擇器 的方法,如果你想更全面的提升網(wǎng)站的速度,那么你可能需要結(jié)合Firebug/ Yslow/ Page Speed 組合應(yīng)用,找到更優(yōu)答案.