一，無(wú)圖片技術(shù)定(dìng)義
在不使(shǐ)用CSS Image（通過CSS的(dí)引(yǐn)入(rù)的背景圖片(piàn),不(bù)包括(kuò)img標簽內的圖片）情(qíng)況下生成類似(sì)圖片(piàn)效(xiào)果(guǒ)的技術(shù)；換句話的意(yì)思就是(shì)在使(shǐ)用(yòng)純CSS生成類(lèi)似(sì)圖(tú)片(piàn)效果的技術(shù)。
二，為什麼要“無圖片”？
首(shǒu)先我們(mén)通(tōng)過(guò)yslow的statistics查看(kàn)新(xīn)浪(làng)微博最新版首頁的(dí)文件，得到Stylesheet File(CSS文件)大小為206.8K, CSS Image大小為623.8K。明顯發現CSS文(wén)件比(bǐ)CSS Image小很(hěn)多(duō)。
當然(rán)單純拿這兩個來比，還(huán)不能(néng)說明(míng)什(shí)麼(mó)。
下麵我(wǒ)們通(tōng)過(guò)計(jì)算來說(shuō)下CSS文件與(yǔ)CSS Image關係
CSS Image是由(yóu)一(yī)係(xì)列(liè)的(dí)圖(tú)片(piàn)組成，每一張(zhāng)圖(tú)，即使最(zuì)小一個(gè)小箭頭(tóu)（如下(xià)圖），你(nǐ)存(cún)成(chéng)一張圖(tú)片，怎(zěn)麼也得(dé)1KB吧。
例(lì)如微博(bó)的這(zhè)個小三(sān)角(jiǎo)圖形(xíng)：
如果(guǒ)我們全部以(yǐ)CSS的形(xíng)式模(mó)擬(nǐ)這(zhè)個小箭頭(tóu)，空間資源會(huì)占多少？我(wǒ)們(mén)來計算一下(xià)，首(shǒu)先貼(tiē)下(xià)代碼
HTML代碼如(rú)下(xià)：
CSS代(dài)碼如(rú)下(xià)：
從(cóng)上(shàng)麵的代(dài)碼(mǎ)可以看出(chū)，在(zài)CSS文(wén)件中總共(gòng)不到(dào)200個(gè)字(zì)符，如(rú)果(guǒ)我(wǒ)們(mén)按照(zhào)1字(zì)符(fú)等(děng)於1B的來計算的(dí)話，200個字符大概(gài)等於(yú)0.2KB，比直接用(yòng)圖片做節約(yuē)了(liǎo)4/5的下(xià)載(zǎi)資源(yuán)，明顯(xiǎn)減少請(qǐng)求資源的大小。如果(guǒ)我(wǒ)們盡可(kě)能(néng)的(dí)使(shǐ)用(yòng)無(wú)圖(tú)片技術來實現(xiàn)，明(míng)顯可以提高頁麵的(dí)加(jiā)載(zǎi)速(sù)度(dù)；其次(cì)，我們(mén)知道每(měi)一(yī)個CSS image都(dū)需要一個http請求去(qù)加載，瀏覽器(qì)每次發出(chū)的(dí)請(qǐng)求(qiú)個數是有限(xiàn)的，減(jiǎn)少CSS image的(dí)個(gè)數，顯然(rán)減(jiǎn)少了(liǎo)http請求數，也就(jiù)提高頁(yè)麵的(dí)呈(chéng)現(xiàn)速度；再次，經常使(shǐ)用微博(bó)的同學都(dū)知道，微博(bó)是可以(yǐ)換膚，如(rú)果使用(yòng)CSS無(wú)圖(tú)片技術(shù)，我們(mén)僅需(xū)要簡(jiǎn)單換(huàn)一下(xià)CSS屬(shǔ)性(xìng)就(jiù)能實現換膚，提高(gāo)了代碼的可維(wéi)護(hù)性。
通(tōng)過以(yǐ)上分析，使(shǐ)用(yòng)CSS無圖片(piàn)技術，可以總結(jié)得(dé)到(dào)以下(xià)3個(gè)優點(diǎn)：
減少請求資源的大小 減少http的請求個數 提高可維護性
三(sān)，CSS無圖片技術，微博中(zhōng)有哪(nǎ)些實際(jì)應用(yòng)呢？
通過(guò)上麵(miàn)的(dí)展(zhǎn)示，我(wǒ)們可以看到，無圖(tú)片技(jì)術，在(zài)微(wēi)博上(shàng)應(yīng)用(yòng)是十(shí)分(fēn)普(pǔ)遍(biàn)的。
四(sì)，無圖片(piàn)技術的實(shí)現方式(shì)
大概有(yǒu)四種(zhǒng)方式：一是(shì)通(tōng)過background-color，border生成圖片；二(èr)是通(tōng)過字符生成(chéng)圖(tú)片；三是通過CSS3 的gradient等(děng)生(shēng)成(chéng)圖片（這個要考慮低級瀏(liú)覽(lǎn)器不兼(jiān)容的問(wèn)題(tí)）；四是CSS3的自定(dìng)義(yì)字(zì)體(@font-face)生(shēng)成圖(tú)片。
利用CSS的background-color，border屬(shǔ)性可以生成(chéng)一(yī)些圖(tú)形，例如三角。純粹的CSS2的內(nèi)容，完全(quán)可以兼容(róng)IE6。
1）用background-color生成的小(xiǎo)方塊，效(xiào)果如下(xià)：
CSS代(dài)碼(mǎ)：
2）用border生成的(dí)小方塊，效果如下：
CSS代(dài)碼：
3）用border生成(chéng)的小三角，效果如下(xià)：
CSS代(dài)碼：
4）用border生成(chéng)的(dí)尖三(sān)角(jiǎo)，效果如下：
CSS代(dài)碼：
5）用border生成的(dí)斜(xié)三角(jiǎo)，效果(guǒ)如下(xià)：
HTML結構(gòu)：
CSS代(dài)碼(mǎ)：
通(tōng)過以(yǐ)上(shàng)5種圖形(xíng)，可以得(dé)到以下圖形，效果(guǒ)圖如下。
這(zhè)裏(lǐ)隻(zhī)貼(tiē)一下(xià)中(zhōng)間圖形的代(dài)碼(mǎ)，其他的(dí)，要(yào)興趣的同(tóng)學(xué)可以(yǐ)自己去研究，更(gēng)多有意思(sī)的圖形(xíng)等(děng)著你(nǐ)去完(wán)成。
HTML結(jié)構：
CSS代碼：
2．通過(guò)字(zì)符生成圖片(piàn)，例(lì)如(rú)尖(jiān)角，圓(yuán)點以及箭頭，這(zhè)也是(shì)CSS2範疇，完(wán)全(quán)可(kě)以兼容(róng)ie6。這(zhè)個(gè)在(zài)博中使(shǐ)用(yòng)廣(guǎng)泛，這裏(lǐ)不單獨寫demo了(liǎo)。
1）尖角(jiǎo)，效(xiào)果(guǒ)圖如下
HTML結構：
CSS代碼：
2）圓點，效(xiào)果圖如(rú)下
HTML結構(gòu)：
CSS樣(yàng)式：
3）箭頭(tóu)，效果(guǒ)圖如下
HTML結(jié)構：
CSS樣式：
微博(bó)名人堂(táng)沒做具(jù)體的(dí)定義(yì)，但是建議(yì)可以對(duì)字體樣(yàng)式做(zuò)些(xiē)限(xiàn)製，以便(biàn)在各種(zhǒng)瀏覽器(qì)表(biǎo)現(xiàn)一樣(yàng)。
3．CSS3生(shēng)成圖(tú)片(piàn)，使(shǐ)用box-shadow，border-radius，gradient漸變等CSS3的新屬性生成圖(tú)形，IE瀏(liú)覽器(qì)下(xià)漸變背景的使用需要(yào)使(shǐ)用IE的漸變(biàn)濾鏡(jìng)，但是使用(yòng)濾鏡資(zī)源會(huì)消耗(hào)很大，所以(yǐ)，根據項目(mù)實際情況去權(quán)衡是否(fǒu)使(shǐ)用濾(lǜ)鏡。
先看下(xià)穀(gǔ)歌(gē)搜(sōu)索(suǒ)按(àn)鈕(niǔ)的例(lì)子
CSS樣式：
GOOGLE搜索這(zhè)個按鈕(niǔ)沒(méi)有(yǒu)使(shǐ)用濾(lǜ)鏡，IE瀏覽器就(jiù)沒(méi)有做漸變(biàn)處理，大家都知(zhī)道(dào)GOOGLE是非常在(zài)意性(xìng)能的公司，有些(xiē)時候為(wéi)了極致(zhì)的性(xìng)能(néng)，稍(shāo)微犧牲一下(xià)視(shì)覺(jué)體驗(yàn)也是可(kě)以(yǐ)接(jiē)受(shòu)的(dí)。
再(zài)看一(yī)下淘寶網“查(chá)看更多(duō)”的(dí)按鈕
CSS樣(yàng)式：
淘(táo)寶網(wǎng)這(zhè)個(gè)按鈕使用濾鏡，可以(yǐ)完美(měi)兼(jiān)容(róng)IE，當然這也(yě)不能去猜(cāi)測(cè)淘寶不(bù)注(zhù)重(zhòng)性能(néng)，隻(zhī)能(néng)說視覺(jué)體驗(yàn)和(hé)性能(néng)博弈的結果(guǒ)。
4. CSS3的(dí)自定義字(zì)體(tǐ)(@font-face)生成(chéng)圖片(piàn)，雖然(rán)這個(gè)方(fāng)法(fǎ)不(bù)屬(shǔ)於(yú)真(zhēn)正意(yì)義的無圖片，但是容易編(biān)輯和(hé)維(wéi)護(hù)，更重要(yào)的是(shì)它(tā)的尺寸(cùn)，顏色可(kě)以(yǐ)通過CSS來控製(zhì)，這間接地做(zuò)到少使(shǐ)用圖片。
具(jù)體(tǐ)應用(yòng)，微博(bó)微(wēi)吧(bā)的ICON
HTML結構(gòu)：
CSS樣(yàng)式：
至於(yú)具體(tǐ)實(shí)現(xiàn)方式的(dí)理論(lùn)基礎(chǔ)，要展(zhǎn)開寫(xiě)，又是一篇文章，有(yǒu)興(xīng)趣的(dí)同(tóng)學(xué)參(cān)考(kǎo)一下(xià)@神飛(fēi)寫(xiě)的《CSS3 icon font完(wán)全(quán)指南》。
總之(zhī)，CSS無圖片技術，是我(wǒ)們(mén)在(zài)寫CSS樣式中(zhōng)需要(yào)形成的(dí)一種理念(niàn)，我不(bù)必死磕(kē)無(wú)圖(tú)片(piàn)技術(shù)，要(yào)在實際的(dí)項目權衡(héng)利(lì)弊，根(gēn)據實際(jì)情況，靈(líng)活運(yùn)用(yòng)無圖片技(jì)術做一些合(hé)理(lǐ)有效(xiào)的性能(néng)優化。
作者：微博UDC
轉載請保(bǎo)留原文地址(zhǐ): https://antelcom.cn/show-318.html