在我們做網站的過程中,免不了拿些別人的代碼,因為我們不是專業的美工,沒有切圖什麼的原創技能,不過其實跟著牛逼的網站走也挺好的,我的意思就是仿別人的網站,在我們扒下來後免不得修改,加加刪刪,發現多出幾個css,那這樣就需要優化了。
工具/原料
火狐瀏覽器 firebug
火狐瀏覽器插件css usager
方法/步驟
如下圖在火狐裡安裝以上兩個工具
打開我們要優化的網站,本地也行,這時按f12打開debug,如下圖
已經可以看到css usager 這個頁籤,在這個標籤左側我們可以看到有Scan Clear AutoScan
Scan 掃描當前css試用情況
Clear 清楚當前掃描結果
AutoScan 開啟自動掃描,我們知道一般網站設計會將css都寫進一個文件,這樣可以減少併發請求,流量大就知道重要了,這個按鈕就是針對全站一個css,逐漸打開頁面,掃描後累計起來的結果
這裡拿我最近做的一個<910笑翻網>做案列,我們點擊scan看到如下圖已經出結果,這裡綠色是當前用到的css,紅色是未用到的,這樣我們就可以清楚的看見那些css可以去除了,在這裡當然工具已經給了我們一個按鈕,如圖中標記的
export cleaned css(導出清洗後的css)點擊後就可以活的用到的css集合了,現在只要備份一份原css,覆蓋導出後的,刷新看看效果吧。
注意事項
做電腦的要注意備份源文件,少看幾個片就有了,哈哈