網(wǎng)站性能優(yōu)化之CSS無(wú)圖片技術(shù)

一、無(wú)圖片技術(shù)定義
在不使用CSS Image（通過(guò)CSS的引入的背景圖片,不包括img標(biāo)簽內(nèi)的圖片）情況下生成類似圖片效果的技術(shù)；換句話的意思就是在使用純CSS生成類似圖片效果的技術(shù)。
二、為什么要“無(wú)圖片”？
首先我們通過(guò)yslow的statistics查看新浪微博最新版首頁(yè)的文件，得到Stylesheet File(CSS文件)大小為206.8K, CSS Image大小為623.8K。明顯發(fā)現(xiàn)CSS文件比CSS Image小很多。

當(dāng)然單純拿這兩個(gè)來(lái)比，還不能說(shuō)明什么。
下面我們通過(guò)計(jì)算來(lái)說(shuō)下CSS文件與CSS Image關(guān)系
CSS Image是由一系列的圖片組成，每一張圖，即使最小一個(gè)小箭頭（如下圖），你存成一張圖片，怎么也得1KB吧。
例如微博的這個(gè)小三角圖形

如果我們?nèi)恳訡SS的形式模擬這個(gè)小箭頭，空間資源會(huì)占多少？我們來(lái)計(jì)算一下，首先貼下代碼
HTML代碼如下

CSS代碼如下

從上面的代碼可以看出，在CSS文件中總共不到200個(gè)字符，如果我們按照1字符等于1B的來(lái)計(jì)算的話，200個(gè)字符大概等于0.2KB，比直接用圖片做節(jié)約了4/5的下載資源，明顯減少請(qǐng)求資源的大小。如果我們盡可能的使用無(wú)圖片技術(shù)來(lái)實(shí)現(xiàn)，明顯可以提高頁(yè)面的加載速度；其次，我們知道每一個(gè)CSS image都需要一個(gè)http請(qǐng)求去加載，瀏覽器每次發(fā)出的請(qǐng)求個(gè)數(shù)是有限的，減少CSS image的個(gè)數(shù)，顯然減少了http請(qǐng)求數(shù)，也就提高頁(yè)面的呈現(xiàn)速度；再次，經(jīng)常使用微博的同學(xué)都知道，微博是可以換膚，如果使用CSS無(wú)圖片技術(shù)，我們僅需要簡(jiǎn)單換一下CSS屬性就能實(shí)現(xiàn)換膚，提高了代碼的可維護(hù)性。
通過(guò)以上分析，使用CSS無(wú)圖片技術(shù)，可以總結(jié)得到以下3個(gè)優(yōu)點(diǎn)
減少請(qǐng)求資源的大小
減少http的請(qǐng)求個(gè)數(shù)
提高可維護(hù)性
三、CSS無(wú)圖片技術(shù)，微博中有哪些實(shí)際應(yīng)用呢？

通過(guò)上面的展示，我們可以看到，無(wú)圖片技術(shù)，在微博上應(yīng)用是十分普遍的。
四、無(wú)圖片技術(shù)的實(shí)現(xiàn)方式
大概有四種方式：一是通過(guò)background-color、border生成圖片；二是通過(guò)字符生成圖片；三是通過(guò)CSS3 的gradient等生成圖片（這個(gè)要考慮低級(jí)瀏覽器不兼容的問(wèn)題）；四是CSS3的自定義字體(@font-face)生成圖片。
利用CSS的background-color、border屬性可以生成一些圖形，例如三角。純粹的CSS2的內(nèi)容，完全可以兼容IE6。
1）用background-color生成的小方塊，效果如下：

CSS代碼：

2）用border生成的小方塊，效果如下：

CSS代碼：

3）用border生成的小三角，效果如下：

CSS代碼：

4）用border生成的尖三角，效果如下：

CSS代碼：

5）用border生成的斜三角，效果如下：

HTML結(jié)構(gòu)：

CSS代碼：

通過(guò)以上5種圖形，可以得到以下圖形，效果圖如下。

這里只貼一下中間圖形的代碼，其他的，要興趣的同學(xué)可以自己去研究，更多有意思的圖形等著你去完成。
HTML結(jié)構(gòu)：

CSS代碼：

2．通過(guò)字符生成圖片，例如尖角、圓點(diǎn)以及箭頭，這也是CSS2范疇，完全可以兼容ie6。這個(gè)在博中使用廣泛，這里不單獨(dú)寫(xiě)demo了。
1）尖角，效果圖如下

HTML結(jié)構(gòu)：

CSS代碼：

2）圓點(diǎn)，效果圖如下

HTML結(jié)構(gòu)：

CSS樣式：

3）箭頭，效果圖如下

HTML結(jié)構(gòu)：

CSS樣式：

微博名人堂沒(méi)做具體的定義，但是建議可以對(duì)字體樣式做些限制，以便在各種瀏覽器表現(xiàn)一樣。

3．CSS3生成圖片，使用box-shadow，border-radius，gradient漸變等CSS3的新屬性生成圖形，IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡，但是使用濾鏡資源會(huì)消耗很大，所以，根據(jù)項(xiàng)目實(shí)際情況去權(quán)衡是否使用濾鏡。
先看下谷歌搜索按鈕的例子

CSS樣式：

GOOGLE搜索這個(gè)按鈕沒(méi)有使用濾鏡，IE瀏覽器就沒(méi)有做漸變處理，大家都知道GOOGLE是非常在意性能的公司，有些時(shí)候?yàn)榱藰O致的性能，稍微犧牲一下視覺(jué)體驗(yàn)也是可以接受的。
再看一下淘寶網(wǎng)“查看更多”的按鈕

CSS樣式：

淘寶網(wǎng)這個(gè)按鈕使用濾鏡，可以完美兼容IE，當(dāng)然這也不能去猜測(cè)淘寶不注重性能，只能說(shuō)視覺(jué)體驗(yàn)和性能博弈的結(jié)果。
4. CSS3的自定義字體(@font-face)生成圖片，雖然這個(gè)方法不屬于真正意義的無(wú)圖片，但是容易編輯和維護(hù)，更重要的是它的尺寸，顏色可以通過(guò)CSS來(lái)控制，這間接地做到少使用圖片。
具體應(yīng)用，微博微吧的ICON

HTML結(jié)構(gòu)：

CSS樣式：

至于具體實(shí)現(xiàn)方式的理論基礎(chǔ)，要展開(kāi)寫(xiě)，又是一篇文章，有興趣的同學(xué)參考一下@神飛寫(xiě)的《CSS3 icon font完全指南》http://www.qianduan.net/css3-icon-font-guide.html。

總之，CSS無(wú)圖片技術(shù)，是我們?cè)趯?xiě)CSS樣式中需要形成的一種理念，我不必死磕無(wú)圖片技術(shù)，要在實(shí)際的項(xiàng)目權(quán)衡利弊，根據(jù)實(shí)際情況，靈活運(yùn)用無(wú)圖片技術(shù)做一些合理有效的性能優(yōu)化。