提取有用的css代碼,網頁優化。html用到的css?

Tags: 網頁, 代碼,

在我們做網站的過程中,免不了拿些別人的代碼,因為我們不是專業的美工,沒有切圖什麼的原創技能,不過其實跟著牛逼的網站走也挺好的,我的意思就是仿別人的網站,在我們扒下來後免不得修改,加加刪刪,發現多出幾個css,那這樣就需要優化了。

工具/原料

火狐瀏覽器 firebug

火狐瀏覽器插件css usager

方法/步驟

如下圖在火狐裡安裝以上兩個工具

提取有用的css代碼,網頁優化。html用到的css

打開我們要優化的網站,本地也行,這時按f12打開debug,如下圖

已經可以看到css usager 這個頁籤,在這個標籤左側我們可以看到有Scan Clear AutoScan

Scan 掃描當前css試用情況

Clear 清楚當前掃描結果

AutoScan 開啟自動掃描,我們知道一般網站設計會將css都寫進一個文件,這樣可以減少併發請求,流量大就知道重要了,這個按鈕就是針對全站一個css,逐漸打開頁面,掃描後累計起來的結果

提取有用的css代碼,網頁優化。html用到的css

這裡拿我最近做的一個<910笑翻網>做案列,我們點擊scan看到如下圖已經出結果,這裡綠色是當前用到的css,紅色是未用到的,這樣我們就可以清楚的看見那些css可以去除了,在這裡當然工具已經給了我們一個按鈕,如圖中標記的

export cleaned css(導出清洗後的css)點擊後就可以活的用到的css集合了,現在只要備份一份原css,覆蓋導出後的,刷新看看效果吧。

提取有用的css代碼,網頁優化。html用到的css

注意事項

做電腦的要注意備份源文件,少看幾個片就有了,哈哈

相關問題答案