sprites是鬼怪，小妖精，調(diào)皮鬼的意思，初聽這個(gè)高端洋氣的名字我被震懾住了，一步步掀開其面紗后發(fā)覺非常easy的東西。作用卻非常大

什么是CSS Sprites

? CSS Sprites是指把網(wǎng)頁中非常多小圖片（非常多圖標(biāo)文件）做成按規(guī)律排列的一張大圖上，在顯示的時(shí)候通過background-image、background-position顯示圖片特定部分達(dá)到和分散的一張張小圖片一樣的效果。

JqueryUI的效果圖例如以下

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

為什么要使用CSSSprites

? 姑且先無論這是怎么實(shí)現(xiàn)的，我們先來了解一下又好好的方法它不用為什么要用這樣的怪異的方式，在代碼書寫和可讀性上都有了一定程度的開銷。這么干有什么優(yōu)點(diǎn)能讓人們放棄安逸的做法來用CSS sprites呢？

• ?瀏覽器載入圖片為堵塞形式

? ? ? ?我們知道瀏覽器在載入網(wǎng)頁的時(shí)候圖片文件及外部的JS、CSS文件都須要單獨(dú)下載，但JS是阻塞HTML下載進(jìn)程的，圖片是另外開啟進(jìn)程來下載的，不同的瀏覽器同一時(shí)候下載圖片的數(shù)量的限制一般為一個(gè)或者五個(gè)或者十個(gè)，所以假設(shè)一個(gè)遍布了圖片的網(wǎng)頁，或者一系列網(wǎng)頁，即使你網(wǎng)速再快也要分批次的下載這些圖片。

• ?圖片下載為一次完整的http請(qǐng)求

???????????每一個(gè)圖片的下載都是一次完整的HTTP請(qǐng)求-響應(yīng)。而把非常多小圖片集中到一張圖片上這樣在僅僅須要一個(gè)HTTP請(qǐng)求-響應(yīng)，在如今網(wǎng)速條件下不超過200k的圖片下載速度是差點(diǎn)兒相同的，下載一次之后不管是該頁面還是網(wǎng)站其他頁面使用包括在這張大圖上的圖片的時(shí)候就能夠使用緩存，不會(huì)帶來重復(fù)下載的開銷。所以僅僅有一個(gè)HTTP請(qǐng)求-響應(yīng)。

• Sprites降低HTTP請(qǐng)求

所以使用CSS sprites最大的優(yōu)點(diǎn)就是降低HTTP請(qǐng)求，加快站點(diǎn)響應(yīng)速度，提高站點(diǎn)性能。

或許會(huì)問，多幾個(gè)HTTP請(qǐng)求真的會(huì)那么嚴(yán)重嗎？假設(shè)使用一張大圖，那么非常可能大圖中有幾個(gè)圖片用不到。這不是多載入內(nèi)容了嗎。和多幾次HTTP請(qǐng)求開銷差距有那么大嗎？

CSS Sprites實(shí)現(xiàn)

首先了解一下CSS的?background-position

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

語法：

background-position: length || length

background-position: position || position

取值：

length? :百分?jǐn)?shù) |由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。

position? :top | center | bottom | left | center |right

如： /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }/* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; }
我們看到使用的url為同一個(gè)圖片，知識(shí)postion時(shí)，圖片的鎖定位置有變動(dòng)。

小結(jié)：

? ?CSS?Sprites的缺點(diǎn)：凡事有利必有弊端。

可能有人喜歡，有人不喜歡，由于每次圖片修改都要往這張圖片加入內(nèi)容，圖片的坐標(biāo)定位要非常準(zhǔn)確會(huì)，會(huì)稍顯繁瑣。坐標(biāo)定位要固定為某個(gè)絕對(duì)值，因此會(huì)失去如center的一些靈活屬性。

CSS?Sprites?有長處也有缺點(diǎn)。要不要使用，詳細(xì)要看網(wǎng)頁以載入速度為主還是以維護(hù)方便easy為主。

總結(jié)

以上是生活随笔為你收集整理的Web优化 --利用css sprites降低图片请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。