武林網(wǎng)(www.survivalescaperooms.com)文章簡介:這些無用的浪費了一些服務(wù)器空間和帶寬消耗,也會增大我們的維護成本。那么有沒有一些辦法來清理那些無用的樣式呢?今天就讓我們來了解一下幾個比較有用的工具。
在我們寫樣式的時候,頁面的CSS在經(jīng)歷幾個版本的修改之后,可能有些樣式已經(jīng)用不到了,或許將某些樣式更名了而原來的忘了刪除,總之頁面中可能存在著一些無用的樣式。這些無用的浪費了一些服務(wù)器空間和帶寬消耗,也會增大我們的維護成本。那么有沒有一些辦法來清理那些無用的樣式呢?今天就讓我們來了解一下幾個比較有用的工具。
Dust-Me selectorsDust-Me是一個很有用也很好用的Firefox插件,它可以分析到你的頁面中調(diào)用的所有CSS文件并分析那些在頁面中沒有被用到。
安裝:點擊這里。同時,你可以下載該項目的源代碼,了解更多請訪問 Dust-Me selector官方頁面。
Page SpeedPage Speed是Google提供的一個前端性能分析工具,有些類似于YSlow,但是提供了一些比較個性且很有用的工具,比如Remove unused CSS:
Page Speed和YSlow一樣依賴Firebug,了解詳情和安裝請訪問這里。
CSS Redundancy CheckerCSS Redundancy Checker是一個免費的在線應(yīng)用,可以檢查所有的使用某個CSS文件的頁面中無用的樣式。可以同時檢查某一個樣式在多個頁面中的使用情況。該工具的不足是雖然一次能檢查多個HTML頁面,但每次只能檢查一個CSS文件,而且還要手動輸入:
IntelliJ IDEA這是一個頗強大的IDE,類似于DreamWeaver,不過在國內(nèi)用的不多。該軟件包括一個即時代碼分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。
Expression WebExpression Web作為微軟的新一代網(wǎng)站開發(fā)工具,還是有很多人使用的,其CSS Report功能可以檢查未用到需要被清除的CSS(我的確沒有使用EW開發(fā)過網(wǎng)站,希望使用該軟件的童鞋可以幫忙確認(rèn)一下這一點)。
結(jié)語當(dāng)然可能還有其它的某些工具這里沒有提到,如果大家有所了解,可以與大家分享。
另外,通常我們將整個網(wǎng)站的樣式寫入一個或多個樣式文件中,然后在頁面中全部調(diào)用或者分模塊調(diào)用,那么某個CSS文件中的樣式可能在某個頁面中的確沒有用到但是在其它的頁面中被用到了,所以使用這些工具檢測CSS文件中多余的樣式的時候,需要保持一定的謹(jǐn)慎,清除樣式可能會影響到其它的頁面,所以page speed提供的檢查結(jié)果只適用于單個頁面,不適合整個網(wǎng)站,而使用Dust-Me或CSS Redundancy Checker的時候可以對整個網(wǎng)站或者網(wǎng)站的多個頁面同時檢查,這樣可能能避免萬無一失。
PS:Thanks to Knowledge Capsules’s work very much.
新聞熱點
疑難解答