大家好仔雷，我是IT修真院北京總院第24期的學(xué)員蹂析，一枚正直純潔善良的web程序員
今天給大家分享一下舔示，修真院官網(wǎng)css任務(wù)7，深度思考中的知識(shí)點(diǎn)——什么是CSS SPRITES电抚？
1.背景介紹
在計(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è)的顯示性能。
2.知識(shí)剖析
那這項(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ì)讓你肉疼了。更別說(shuō)對(duì)眾多的手機(jī)用戶了纵装，流量都是錢(qián)吶征讲！
3.常見(jiàn)問(wèn)題
如何實(shí)現(xiàn)CSS sprites
4.解決方案
1.我們需要找到需要使用的小圖標(biāo)，然后對(duì)圖標(biāo)進(jìn)行切圖橡娄，切出來(lái)我們需要的圖片或者圖標(biāo)诗箍。
2.將這些切好的圖片拼接在一起,這里我們可以使用photoshop，但是更好的是很多前輩制作了許多sprites圖生成工具挽唉，也就是俗稱的雪碧圖生成工具滤祖，下面我給大家演示一下。
好了瓶籽，我們做好需要使用的雪碧圖匠童，現(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)單的演示一下巧骚。
1. 假設(shè)合成之后的雪碧圖寬是 W1, 需要顯示的子圖片寬度是 W2, 以子圖為背景的標(biāo)簽寬度是 W3赊颠，background-size的寬度是x
2. 有公式 x/W3 = W1/W2 => x = W1*W3/W2
3. 所以 background-size 的寬度值為 W1*W3/W2
優(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)
1.每次制作雪碧圖都很繁瑣，增大前端和UI的工作量纲菌。
2.雪碧圖制作完成之后挠日，維護(hù)特別困難，每次要加或者換圖片都需要重新制作一整張圖片翰舌。
3.難以實(shí)現(xiàn)自適應(yīng)嚣潜，圖片的大小都限定死了。
4.由于圖片的位置需要固定為某個(gè)絕對(duì)數(shù)值椅贱，這就失去了諸如center之類的靈活性懂算。
前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites庇麦，否則可能會(huì)出現(xiàn)出現(xiàn)干擾圖片的情況计技。這就是說(shuō)，在一些需要非單向的平鋪背景和需要網(wǎng)頁(yè)縮放的情況下山橄，CSS Sprites并不合適酸役。解決方式是，加大圖片之間的距離驾胆，這樣可以保持有限度的縮放。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
雪碧圖如何自適應(yīng)
雪碧圖常規(guī)的方案一般會(huì)做幾套不同大小的圖去適應(yīng)不同的設(shè)備尺寸
把整圖整體縮放
...你別用雪碧圖啊 不要死心眼 就是這樣
雪碧圖常用在哪里
CSS Sprites常用來(lái)合并頻繁使用的圖形元素贱呐，如導(dǎo)航丧诺、LOGO、分割線奄薇、RSS圖標(biāo)驳阎、按鈕等。通常它們不會(huì)作為網(wǎng)頁(yè)內(nèi)容出現(xiàn)馁蒂，因?yàn)樯婕皟?nèi)容的圖片并不是每個(gè)頁(yè)面都一樣呵晚。
7.參考文獻(xiàn)
參考一：Wiki百科 sprites
參考二：雪碧圖如何自適應(yīng)
視頻鏈接? ? 密碼: 5wvx
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊沫屡、轉(zhuǎn)發(fā)饵隙、留言、拍磚~
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師沮脖，現(xiàn)在開(kāi)始金矛，找個(gè)師兄芯急，帶你入門(mén)，掌控自己學(xué)習(xí)的節(jié)奏驶俊，學(xué)習(xí)的路上不再迷萌⑺＃”。
這里是技能樹(shù).IT修真院饼酿，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線榕酒，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化故俐，師兄1對(duì)1免費(fèi)指導(dǎo)想鹰。快來(lái)與我一起學(xué)習(xí)吧~
我的邀請(qǐng)碼：12361358购披，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/12361358
