背景介紹

在計(jì)算機(jī)圖形學(xué)中船万，sprites指的是包含于場(chǎng)景中的二維圖像或者動(dòng)畫(huà)刻撒。最開(kāi)始這項(xiàng)技術(shù)是應(yīng)用于街機(jī)游戲中，里面的人物和可移動(dòng)物品大多數(shù)都是應(yīng)用了sprites耿导，為啥要叫sprites（精靈）呢声怔？

精靈并不是幀緩沖中位圖數(shù)據(jù)的一部分，而是“懸浮”于幀緩沖中的數(shù)據(jù)之上舱呻，沒(méi)有對(duì)其中的數(shù)據(jù)產(chǎn)生影響醋火，就像幽靈和精靈一樣。

CSS精靈也差不多是這個(gè)意思箱吕，可以將原本需要多張圖像文件分別顯示芥驳，整并為單一圖像文件的分區(qū)顯示技術(shù)，借由減少下載圖像文件數(shù)量殖氏，提高網(wǎng)頁(yè)的顯示性能晚树。

那這項(xiàng)技術(shù)為啥能減少http請(qǐng)求呢？講到這里就要提一下雅采，瀏覽器在加載網(wǎng)頁(yè)的時(shí)候圖片文件及外部的JS爵憎、CSS文件都需要單獨(dú)下載，JS是堵塞HTML下載進(jìn)程的婚瓜，圖片是另外開(kāi)啟進(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ù)下載的開(kāi)銷，所以只有一個(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)求開(kā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ī)用戶了说敏，流量都是錢(qián)吶鸥跟！

知識(shí)剖析

一，如何實(shí)現(xiàn)CSS sprites

1.我們需要找到需要使用的小圖標(biāo)盔沫，然后對(duì)圖標(biāo)進(jìn)行切圖医咨，切出來(lái)我們需要的圖片或者圖標(biāo)。

2.將這些切好的圖片拼接在一起,這里我們可以使用photoshop架诞，但是更好的是很多前輩制作了許多sprites圖生成工具拟淮，也就是俗稱的雪碧圖生成工具，具體的步驟可以看下面的視頻侈贷。

二惩歉，應(yīng)用到網(wǎng)頁(yè)

好了等脂，我們做好需要使用的雪碧圖，現(xiàn)在需要將這個(gè)圖應(yīng)用到我們的網(wǎng)頁(yè)中撑蚌，利用CSS的“background-image”上遥，“background- repeat”，“background-position”的組合進(jìn)行背景定位争涌，background-position可以用數(shù)字精確的定位出背景圖片的位置粉楚。根據(jù)雪碧圖中圖標(biāo)的具體像素大小，再規(guī)定元素的具體大小亮垫，然后使用background-position找到圖標(biāo)的位置模软。元素大小相當(dāng)于相機(jī)機(jī)頭，background-position相當(dāng)于移動(dòng)相機(jī)找到我們需要的景物饮潦，下面給大家簡(jiǎn)單的演示一下燃异。

三，css sprites的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

上面也提到了继蜡，通過(guò)減少下載圖片的數(shù)量以減少http請(qǐng)求數(shù)量回俐，減少http報(bào)文，節(jié)省流量稀并，增加訪問(wèn)速度仅颇，提高網(wǎng)頁(yè)的性能。這是它最大的優(yōu)點(diǎn)碘举。

缺點(diǎn)

每次制作雪碧圖都很繁瑣忘瓦，增大前端和UI的工作量。

雪碧圖制作完成之后引颈，維護(hù)特別困難耕皮，每次要加或者換圖片都需要重新制作一整張圖片。

難以實(shí)現(xiàn)自適應(yīng)线欲，圖片的大小都限定死了明场。

綜合考慮，一切為了性能李丰，這些缺點(diǎn)只能忍受了苦锨，但是大家做雪碧圖之前也要考慮清楚，哪些圖片不適合使用雪碧圖趴泌，綜合考慮舟舒，合理使用。

3.常見(jiàn)問(wèn)題

雪碧圖如何自適應(yīng)呢嗜憔？

4.解決方案

這是個(gè)坑秃励。。吉捶。夺鲜。需要自適應(yīng)的圖片就不要使用雪碧圖了嘛皆尔！

5.編碼實(shí)戰(zhàn)

用CSS sprites寫(xiě)一副撲克牌，具體習(xí)題在這個(gè)鏈接里面币励，這個(gè)蠻有趣的慷蠕，大家有興趣可以嘗試下，可以更加熟悉CSS sprites的使用食呻。

http://www.cnblogs.com/scgw/archive/2011/03/19/1988908.html

6.參考文獻(xiàn)

Wiki百科 sprites

簡(jiǎn)單實(shí)例讓你快速掌握css sprites精髓