很多頁(yè)面常用的小圖標(biāo)，但是我們看看每個(gè)小圖標(biāo)的源碼的時(shí)候會(huì)發(fā)現(xiàn)，這些小圖標(biāo)的src是同一個(gè)文件，都是這張大圖

為什么要使用CSS小妖精

姑且先不管這是怎么實(shí)現(xiàn)的，我們先來(lái)了解一下又好好的方法它不用為什么要用這種怪異的方式，在代碼書寫和可讀性上都有了一定程度的開銷，這么干有什么好處能讓人們放棄安逸的做法來(lái)用CSS sprites呢？

我們知道瀏覽器在加載網(wǎng)頁(yè)的時(shí)候圖片文件及外部的JS、CSS文件都需要單獨(dú)下載，JS是堵塞HTML下載進(jìn)程的，圖片是另外開啟進(jìn)程來(lái)下載的，不同的瀏覽器會(huì)有不同的同時(shí)下載圖片的數(shù)量的限制或者一個(gè)或者五個(gè)或者十個(gè)，反正是有限制的，所以如果一個(gè)遍布了圖片的網(wǎng)頁(yè)，或者一系列網(wǎng)頁(yè)，即使你網(wǎng)速再快也要分批次的下載這些圖片。

而且每個(gè)圖片的下載都是一次完整的HTTP請(qǐng)求-響應(yīng)。而把很多小圖片集中到一張圖片上這樣在只需要一個(gè)HTTP請(qǐng)求-響應(yīng)，在現(xiàn)在網(wǎng)速條件下不超過(guò)200k的圖片下載速度是差不多的，下載一次之后無(wú)論是該頁(yè)面還是站點(diǎn)其它頁(yè)面使用包含在這張大圖上的圖片的時(shí)候就可以使用緩存，不會(huì)帶來(lái)反復(fù)下載的開銷，所以只有一個(gè)HTTP請(qǐng)求-響應(yīng)。

所以使用CSS sprites最大的好處就是減少HTTP請(qǐng)求，加快網(wǎng)站響應(yīng)速度，提高網(wǎng)站性能。有同學(xué)可能會(huì)問(wèn)了，多幾個(gè)HTTP請(qǐng)求真的會(huì)那么嚴(yán)重嗎？如果使用一張大圖，那么很可能大圖中有幾個(gè)圖片用不到，這不是多加載內(nèi)容了嗎，和多幾次HTTP請(qǐng)求開銷差距有那么大嗎？

公司小伙伴兒?jiǎn)栠^(guò)我類似問(wèn)題，我舉了個(gè)例子，我在北京，你是我的馬仔，有天我讀了蘇東坡文集，興致來(lái)了想吃廣東的荔枝，自然是馬仔去買，然后你去銀行取錢，坐地鐵、搭火車、開飛機(jī)跑到廣東買了串荔枝回北京，拎一串荔枝回來(lái)不太累，主要是北京到廣州太折騰，明天我又來(lái)興致了，再給我買一串差不多的來(lái)，你又去銀行取錢、跑一趟廣州，不料我讀了一個(gè)月的蘇東坡文集，你要是天天這么跑不得發(fā)瘋，大家都會(huì)想到，看你這么愛(ài)吃荔枝，一次買一箱回來(lái)，拎著是有些累，但好過(guò)一次次的折騰。

在這個(gè)例子中去銀行取錢就是瀏覽器準(zhǔn)備HTTP報(bào)文，跑廣州再回來(lái)就是一個(gè)HTTP請(qǐng)求-響應(yīng)過(guò)程，荔枝自然就是response了，雖然HTTP請(qǐng)求-響應(yīng)過(guò)程沒(méi)有跑廣州那么累，但因?yàn)镠TTP協(xié)議是無(wú)連接的，一次請(qǐng)求結(jié)束后就斷開，每次都這樣也挺累的，就跑一次拿回一張大圖來(lái)還是比較輕松的，當(dāng)然你大圖內(nèi)不能就三四張小圖。。。

還有一個(gè)好處，這樣不但快了，還省流量了，因?yàn)镠TTP請(qǐng)求-響應(yīng)會(huì)在客戶端和服務(wù)器端交互HTTP報(bào)文，所以下載一個(gè)圖片所用流量不只是圖片大小，每個(gè)HTTP報(bào)文會(huì)占用網(wǎng)絡(luò)流量的。也許有同學(xué)會(huì)問(wèn)，誰(shuí)會(huì)在乎那點(diǎn)而流量，你別說(shuō)還真有人在乎，如果你不是自己機(jī)房，而是把服務(wù)器放在別人機(jī)房就知道流量也是很貴的，如果你的網(wǎng)站每天被訪問(wèn)數(shù)十億次，這點(diǎn)兒流量就會(huì)讓你肉疼了，不知道大家看過(guò)Google首頁(yè)P(yáng)age Source沒(méi)有，截取一部分，可以發(fā)現(xiàn)，人家連HTML的換行符、縮進(jìn)、空格都給省了，你說(shuō)圖的是可讀性嗎

更別說(shuō)對(duì)廣大手機(jī)黨來(lái)說(shuō)，流量也是要看的，如果一個(gè)網(wǎng)站訪問(wèn)要花很多流量，我是不會(huì)用手機(jī)看來(lái)看去的

CSS小妖精實(shí)現(xiàn)方法

明白了為什么要這么做，我們就可以看看該怎么來(lái)做了，先有世界觀再有方法論，首先了解一下CSS的background-position

background-position 設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。

語(yǔ)法：
background-position : length || length
background-position : position || position
取值：
length :　 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱 長(zhǎng)度單位
position :　 top | center | bottom | left | center | right

這是jQuery UI上取下來(lái)的兩張圖片，分別是icon普通和hover是的樣子，每個(gè)小圖是16px * 16px，每張圖片有15行16列，當(dāng)然有的部分沒(méi)有圖片，下面的demo會(huì)有很多部分有空白。

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表