當(dāng)一個頁面上有好多個icon小圖片時谚中，如果每個圖片都用img標簽導(dǎo)入渴杆，那么請求數(shù)量會非常多，對用戶和服務(wù)器都會造成延時高負荷的壓力宪塔，流量消耗也大磁奖，這時候，CSS Sprites 就是一種很好的實現(xiàn)方法某筐。
CSS Sprites
在國內(nèi)很多人叫CSS精靈圖比搭，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片合并成一張大圖南誊，這樣一來身诺，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了抄囚。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言霉赡，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題幔托。CSS Sprites簡介
加速的關(guān)鍵穴亏，不是降低質(zhì)量，而是減少個數(shù)重挑。傳統(tǒng)切圖講究精細嗓化，圖片規(guī)格越小越好，重量越小越好谬哀，其實規(guī)格大小無所謂刺覆，計算機統(tǒng)一都按byte計算〔７啵客戶端每顯示一張圖片都會向服務(wù)器發(fā)送請求隅津。所以诬垂，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大伦仍。CSS Sprites原理
CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中结窘，再利用CSS的“background-image”，“background- repeat”充蓝，“background-position”的組合進行背景定位隧枫，background-position可以用數(shù)字精確的定位出背景圖片的位置。CSS Sprites優(yōu)缺點
| 優(yōu)點 | 缺點 |
|---|---|
| 利用CSS Sprites能很好地減少網(wǎng)頁的http請求谓苟，從而大大的提高頁面的性能官脓，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因涝焙； | 在圖片合并的時候卑笨，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間仑撞，防止板塊內(nèi)出現(xiàn)不必要的背景赤兴；這些還好，最痛苦的是在寬屏隧哮，高分辨率的屏幕下的自適應(yīng)頁面桶良，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂沮翔； |
| CSS Sprites能減少圖片的字節(jié)陨帆，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。 | CSS Sprites在開發(fā)的時候比較麻煩采蚀，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置疲牵，這是針線活，沒什么難度搏存，但是很繁瑣瑰步；幸好騰訊的鬼哥用ADOBE AIR開發(fā)了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活璧眠，但是已經(jīng)比photoshop測量來的方便多了缩焦，而且樣式直接生成，復(fù)制责静，拷貝就OK袁滥！ |
| 解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了灾螃，不需要對每一個小元素進行命名题翻，從而提高了網(wǎng)頁的制作效率。 | CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動嵌赠，一般就要改這張合并的圖片塑荒，無需改的地方最好不要動，這樣避免改動更多的css姜挺，如果在原來的地方放不下齿税，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了炊豪，還要改動css凌箕。 |
| 更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式词渤，整個網(wǎng)頁的風(fēng)格就可以改變牵舱。維護起來更加方便。 | IE6 由于不支持background屬性缺虐，所以IE6不兼容CSS Sprites. |
