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

什么是CSS Sprites

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

JqueryUI的效果圖例如以下

非常多頁面經(jīng)常使用的小圖標?？墒俏覀兛纯疵恳粋€小圖標的源代碼的時候會發(fā)現(xiàn)，這些小圖標的src是同一個文件。都是這張大圖

為什么要使用CSSSprites

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

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

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

• ?圖片下載為一次完整的http請求

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

• Sprites降低HTTP請求

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

或許會問，多幾個HTTP請求真的會那么嚴重嗎？假設使用一張大圖，那么非?？赡艽髨D中有幾個圖片用不到。這不是多載入內(nèi)容了嗎。和多幾次HTTP請求開銷差距有那么大嗎？

CSS Sprites實現(xiàn)

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

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

語法：

background-position: length || length

background-position: position || position

取值：

length? :百分數(shù) |由浮點數(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為同一個圖片，知識postion時，圖片的鎖定位置有變動。

小結：

? ?CSS?Sprites的缺點：凡事有利必有弊端。

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

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

總結

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

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