今天，小蟲在使用百度站長平臺中的頁面優(yōu)化建議工具時(shí)，有一條建議是：“下面圖片，可以使用css sprite進(jìn)行合并，減少請求次數(shù)?！比缓罅谐鰜韴D片的鏈接地址，鏈接的指向是幾個(gè)背景小圖標(biāo)。相信很多人(包括很多DIV網(wǎng)頁排版師們)并不是很清楚css sprite是什么?但一定接觸過或使用過。當(dāng)我們另存一些大網(wǎng)站的一些小圖標(biāo)時(shí)，你會(huì)發(fā)現(xiàn)存下來的這張圖里面有很多的圖標(biāo)。小蟲給大家附個(gè)圖：

CSS Sprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，調(diào)取你要的圖標(biāo)到指定的位置。

這樣做能加快網(wǎng)站的加載速度，因?yàn)榭蛻舳嗣匡@示一張圖片都會(huì)向服務(wù)器發(fā)送請求，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。

當(dāng)然CSS Sprites的優(yōu)點(diǎn)遠(yuǎn)不止于此。下面我們來分享一下來自百度百科中CSS Sprites的優(yōu)點(diǎn)：

1.利用CSS Sprites能很好地減少了網(wǎng)頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因;

2.CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。 解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。

3.更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。

凡事有優(yōu)點(diǎn)當(dāng)然也少不了缺點(diǎn)，CSS Sprites的缺點(diǎn)如下：

1.在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不會(huì)出現(xiàn)不必要的背景;這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂;

2.CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop或其他工具測量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣;

3.CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的地方最好不要?jiǎng)樱@樣難免改動(dòng)更多的css，如果在原來的地方放不下，又只能(最好)往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。

本課題有南昌網(wǎng)絡(luò)公司-小蟲收集整理，部份內(nèi)容來自百度百科。歡迎大家一起交流，轉(zhuǎn)載請注明出處。