權(quán)衡利弊 網(wǎng)站性能優(yōu)化之CSS無圖片技術(shù)
來源:網(wǎng)站推廣 2013-06-14
一、無圖片技術(shù)定義
在不使用CSS Image(通過CSS的引入的背景圖片,不包括img標(biāo)簽內(nèi)的圖片)情況下生成類似圖片效果的技術(shù);換句話的意思就是在使用純CSS生成類似圖片效果的技術(shù)。
二、為什么要“無圖片”?
首先我們通過yslow的statistics查看新浪微博最新版首頁的文件,得到Stylesheet File(CSS文件)大小為206.8K, CSS Image大小為623.8K。明顯發(fā)現(xiàn)CSS文件比CSS Image小很多。
當(dāng)然單純拿這兩個(gè)來比,還不能說明什么。
下面我們通過計(jì)算來說下CSS文件與CSS Image關(guān)系
CSS Image是由一系列的圖片組成,每一張圖,即使最小一個(gè)小箭頭(如下圖),你存成一張圖片,怎么也得1KB吧。
例如微博的這個(gè)小三角圖形
如果我們?nèi)恳訡SS的形式模擬這個(gè)小箭頭,空間資源會占多少?我們來計(jì)算一下,首先貼下代碼
HTML代碼如下
CSS代碼如下
從上面的代碼可以看出,在CSS文件中總共不到200個(gè)字符,如果我們按照1字符等于1B的來計(jì)算的話,200個(gè)字符大概等于0.2KB,比直接用圖片做節(jié)約了4/5的下載資源,明顯減少請求資源的大小。如果我們盡可能的使用無圖片技術(shù)來實(shí)現(xiàn),明顯可以提高頁面的加載速度;其次,我們知道每一個(gè)CSS image都需要一個(gè)http請求去加載,瀏覽器每次發(fā)出的請求個(gè)數(shù)是有限的,減少CSS image的個(gè)數(shù),顯然減少了http請求數(shù),也就提高頁面的呈現(xiàn)速度;再次,經(jīng)常使用微博的同學(xué)都知道,微博是可以換膚,如果使用CSS無圖片技術(shù),我們僅需要簡單換一下CSS屬性就能實(shí)現(xiàn)換膚,提高了代碼的可維護(hù)性。
通過以上分析,使用CSS無圖片技術(shù),可以總結(jié)得到以下3個(gè)優(yōu)點(diǎn)
減少請求資源的大小
減少http的請求個(gè)數(shù)
提高可維護(hù)性
三、CSS無圖片技術(shù),微博中有哪些實(shí)際應(yīng)用呢?
通過上面的展示,我們可以看到,無圖片技術(shù),在微博上應(yīng)用是十分普遍的。
四、無圖片技術(shù)的實(shí)現(xiàn)方式
大概有四種方式:一是通過background-color、border生成圖片;二是通過字符生成圖片;三是通過CSS3 的gradient等生成圖片(這個(gè)要考慮低級瀏覽器不兼容的問題);四是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代碼:
通過以上5種圖形,可以得到以下圖形,效果圖如下。
這里只貼一下中間圖形的代碼,其他的,要興趣的同學(xué)可以自己去研究,更多有意思的圖形等著你去完成。
HTML結(jié)構(gòu):
CSS代碼:
2.通過字符生成圖片,例如尖角、圓點(diǎn)以及箭頭,這也是CSS2范疇,完全可以兼容ie6。這個(gè)在博中使用廣泛,這里不單獨(dú)寫demo了。
1)尖角,效果圖如下
HTML結(jié)構(gòu):
CSS代碼:
2)圓點(diǎn),效果圖如下
HTML結(jié)構(gòu):
CSS樣式:
3)箭頭,效果圖如下
HTML結(jié)構(gòu):
CSS樣式:
微博名人堂沒做具體的定義,但是建議可以對字體樣式做些限制,以便在各種瀏覽器表現(xiàn)一樣。
3.CSS3生成圖片,使用box-shadow,border-radius,gradient漸變等CSS3的新屬性生成圖形,IE瀏覽器下漸變背景的使用需要使用IE的漸變?yōu)V鏡,但是使用濾鏡資源會消耗很大,所以,根據(jù)項(xiàng)目實(shí)際情況去權(quán)衡是否使用濾鏡。
先看下谷歌搜索按鈕的例子
CSS樣式:
GOOGLE搜索這個(gè)按鈕沒有使用濾鏡,IE瀏覽器就沒有做漸變處理,大家都知道GOOGLE是非常在意性能的公司,有些時(shí)候?yàn)榱藰O致的性能,稍微犧牲一下視覺體驗(yàn)也是可以接受的。
再看一下淘寶網(wǎng)“查看更多”的按鈕
CSS樣式:
淘寶網(wǎng)這個(gè)按鈕使用濾鏡,可以完美兼容IE,當(dāng)然這也不能去猜測淘寶不注重性能,只能說視覺體驗(yàn)和性能博弈的結(jié)果。
4. CSS3的自定義字體(@font-face)生成圖片,雖然這個(gè)方法不屬于真正意義的無圖片,但是容易編輯和維護(hù),更重要的是它的尺寸,顏色可以通過CSS來控制,這間接地做到少使用圖片。
具體應(yīng)用,微博微吧的ICON
HTML結(jié)構(gòu):
CSS樣式:
至于具體實(shí)現(xiàn)方式的理論基礎(chǔ),要展開寫,又是一篇文章,有興趣的同學(xué)參考一下@神飛寫的《CSS3 icon font完全指南》/)
文章編輯: 365webcall網(wǎng)上客服系統(tǒng)(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
