一個(gè)超棒的CSS小工具:最佳Web性能優(yōu)化
下面開始介紹一下，這個(gè)小工具主要功能有以下這些：
◆ 代碼壓縮
◆ 合并請(qǐng)求
◆ 語法擴(kuò)展
◆ 緩存設(shè)置
代碼壓縮
這個(gè)小工具其實(shí)是一個(gè)Default.aspx頁面文件，我們只要把它放到網(wǎng)站CSS文件夾里面，保證這個(gè)頁面命名是默認(rèn)首頁，然后把我們?cè)瓉硪玫腃SS文件夾后面加一個(gè)問號(hào)就行了。用我的博客舉個(gè)例子，我本來文章頁面中有三個(gè)CSS引用：
- <link href="css/detail.css" rel="stylesheet" type="text/css" />
- <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
- <link href="css/shCore.css" rel="stylesheet" type="text/css" />
然后我們只要改成這樣就可以了：
- <link href="css/?detail.css" rel="stylesheet" type="text/css" />
- <link href="css/?shThemeDefault.css" rel="stylesheet" type="text/css" />
- <link href="css/?shCore.cssshThemeDefault.css" rel="stylesheet" type="text/css" />
這樣之后有什么分別呢?加了問號(hào)之后，CSS引用都定向到我們的頁面，頁面根據(jù)后面的參數(shù)，讀取CSS文件，然后把其中的無效空格，換行，注釋全部清除掉。然后返回一個(gè)壓縮后的CSS文件。可以點(diǎn)擊下面兩個(gè)鏈接看看壓縮前后的效果：
壓縮前：http://www.vinqon.com/codeblog/css/shCore.css
壓縮后：http://www.vinqon.com/codeblog/css/?shCore.css
合并請(qǐng)求
對(duì)于一個(gè)Web優(yōu)化狂熱者來說，每一個(gè)Http請(qǐng)求都是那么的刺眼。這不得不說說一些讓人糾結(jié)的事情。看過《高性能網(wǎng)站建設(shè)指南》的都知道，黃金法則第一條就是減少http請(qǐng)求，對(duì)于CSS來說，我們一般用這些方法來盡量減少請(qǐng)求：
1.合并CSS文件。一個(gè)頁面往往引用了多個(gè)CSS文件，為了減少其請(qǐng)求數(shù)目，我們可以直接把該頁面需要請(qǐng)求的CSS文件手動(dòng)合并成為一個(gè)輸出。但是，這帶來的后果是，嚴(yán)重不利于代碼的維護(hù)和管理。并且，合并之后的代碼都是獨(dú)立的，多個(gè)頁面共用的代碼無法緩存。
2.內(nèi)聯(lián)CSS代碼。內(nèi)聯(lián)CSS的好處是完全杜絕了http請(qǐng)求，而且可以保證CSS里面附帶的圖片也能立刻請(qǐng)求，讓頁面更快完成渲染，QQ，新浪等的門戶首頁都使用了內(nèi)嵌CSS。但是問題還是那個(gè)，首先不利于維護(hù)，其次是不能實(shí)現(xiàn)緩存。因?yàn)檫@些CSS每次都要下載，如果外聯(lián)的話第二次請(qǐng)求的時(shí)候就可以直接使用緩存文件。
針對(duì)內(nèi)聯(lián)CSS代碼的方案，之前我就想過做一個(gè)ASP.Net的插件，把在引用css的link標(biāo)簽改成服務(wù)器控件，輸出頁面的時(shí)候，控件會(huì)加載css文件內(nèi)嵌到頁面中，這樣可以使內(nèi)聯(lián)代碼也便于維護(hù)。
而針對(duì)合并CSS文件的方案，我在這個(gè)小工具中實(shí)現(xiàn)了請(qǐng)求時(shí)自動(dòng)合并，這其實(shí)也不是什么新東西，好像之前也見過，還是用上面的例子，三個(gè)CSS文件合并：
- <link href="css/?detail.css&shCore.css&shThemeDefault.css" rel="stylesheet" type="text/css" />
只要用&把不同的文件名字鏈接起來，就會(huì)得到一個(gè)合并的輸出。通過這樣的實(shí)時(shí)合并，很好避免了手動(dòng)合并帶來的代碼混亂，而且當(dāng)有大量文件的時(shí)候，可以減少http請(qǐng)求數(shù)目，有明顯的提升。
但是，不得不提一下的是：不一定全部CSS合并起來輸出就是最好的，原因首先還是緩存問題，共用文件不應(yīng)該合并，因?yàn)檫@樣使得它每次都要重新下載。另外一個(gè)也是很重要的問題是，瀏覽器是會(huì)并行下載CSS文件的，如果分成多個(gè)文件，可以讓最早下載下來的CSS文件立刻被使用，如果我們把全部亂七八糟的都合并起來，瀏覽器要等到整個(gè)CSS文檔下載完畢才能使用，可能帶來性能的倒退。所以，結(jié)論是:共用和基礎(chǔ)的CSS文件不應(yīng)該合并。
語法擴(kuò)展
先說說目前比較經(jīng)典的一種CSS代碼組織結(jié)構(gòu)，這也是《編寫高質(zhì)量代碼—Web前端開發(fā)修煉之道》作者推薦的方案：
◆ 基礎(chǔ)樣式(主要包括對(duì)默認(rèn)樣式的Reset以及對(duì)用class選擇器組合常用的樣式)
◆ 全站樣式(全站各個(gè)頁面都要用到的樣式，一般負(fù)責(zé)網(wǎng)站整體結(jié)構(gòu)的構(gòu)架)
◆ 頁面樣式(頁面級(jí)的樣式，針對(duì)頁面細(xì)節(jié)的調(diào)整)
關(guān)于CSS代碼組織不是本次主題，我想說一下的是上面粗體字提到的一種比較流行的方法：·
- .fb12{font-size:12px;font-weight:blod}
- .red{color:red}
- .clear{clear:both}
然后我們?cè)陧撁嬷羞@么使用：
- <div id="example" class="fb12 red clear">這是范例！</div>
這些寫法其實(shí)也沒什么特別，但是我覺得很值得探討，沒興趣的可以直接跳過這一段。我們一般在頁面編碼時(shí)，都是先寫好HTML，再去寫樣式。在寫樣式的時(shí)候我們要為某個(gè)標(biāo)簽應(yīng)用某個(gè)樣式，就得用各種選擇符找到目標(biāo)元素，然后賦予樣式。這時(shí)候，無論是類，還是標(biāo)簽，ID，它們的角色都是選擇者，區(qū)別只是ID用來選一個(gè)，標(biāo)簽和類多用來選擇多個(gè)而已。但是在上面例子中，類的情況就有些不同，在上面那種類的樣式定義的時(shí)候，我們不會(huì)想到這一定會(huì)用在哪里，我們只想到這些樣式使用可能比較頻繁，先寫出來，以便復(fù)用，最后才去HTML標(biāo)簽上加上多個(gè)不同的class，組合成一個(gè)新的獨(dú)立樣式。這和直接在style上面寫規(guī)則的不同是，style只能使用的CSS基本屬性，是粒度最小的CSS規(guī)則，用class可以通過基本屬性的組合，形成一定粒度，然后我們可以通過在多個(gè)標(biāo)簽使用不同類的組合形成最終樣式。這樣做一方面可以保證代碼復(fù)用，另一方面又可以便于維護(hù)。其實(shí)上，這種方法更多有標(biāo)簽選擇樣式的意味，而類這個(gè)雙向選擇特性是源于 類選擇符與標(biāo)簽之間可以實(shí)現(xiàn)多對(duì)多的關(guān)系。
但是，這種寫法有一個(gè)弊端，就是不利于結(jié)構(gòu)和樣式的分離。樣式出現(xiàn)在元素里面，一旦修改，很容易觸碰到html代碼。為了解決這個(gè)問題，我在這個(gè)小工具里進(jìn)行了語法擴(kuò)展，我們可以在樣式表中使用多個(gè)class。看例子吧：
- .fb12{font-size:12px;font-weight:blod;}
- .red{color:red;}
- .clear{clear:both;}
- #example{class:fb12 red clear; width:500px;}
我們編寫css的時(shí)候可以直接向上面那樣寫，然后輸出會(huì)變成這樣：
- .fb12{font-size:12px;font-weight:blod;}
- .red{color:red;}
- .clear{clear:both;}
- #example{font-size:12px;font-weight:blod;color:red;clear:both;width:500px;}
很久之前就想過，如果css有這功能多好哇，代碼可以高度復(fù)用了。這次終于弱弱地實(shí)現(xiàn)了一下了。需要注意的是，編譯過程代碼寫得不太好，最好嚴(yán)格遵循css格式，譬如，每個(gè)規(guī)則后面都必須有分號(hào)。另外，也不支持嵌套。
感謝Gray Zhang的推薦，原來目前已經(jīng)有不少強(qiáng)大CSS語法擴(kuò)展的工具，譬如Sass，Lesscss，兩者功能相似，后者甚至支持在客戶端編譯。
緩存設(shè)置
上面很多次提到過緩存，但是因?yàn)槲覀兪褂昧隧撁孑敵觯３２荒鼙粸g覽器緩存，這需要我們自己手動(dòng)設(shè)置，只要在參數(shù)后面加上expire=分鐘數(shù)，就可以了，譬如：
http://localhost:56349/MyBlog/CodeBlog/css/?global.css&expire=50001
這個(gè)小工具很多正則，有人可能會(huì)覺得服務(wù)器也應(yīng)該緩存一下吧，我沒有做服務(wù)器的緩存是因?yàn)槲矣X得客戶端緩存已經(jīng)ok了，而且在本機(jī)調(diào)試的時(shí)候，每次頁面輸出都是在10毫秒之內(nèi)，緩不緩存對(duì)用戶沒有很明顯的感覺。服務(wù)器我就不管啦~
最后，提供源文件下載。
原文鏈接：http://www.cnblogs.com/vinqon/archive/2011/05/02/2034459.html
【編輯推薦】
