武林網(www.survivalescaperooms.com)文章簡介：css sprites的利弊.

css sprites的利弊

關于這項技術，最大的好處有下面幾個：

1，減少網頁加載時的http請求數。這種情況貌似只適用于“初次加載”之類需要重新從服務器端獲取資源的情況。但無論怎樣，對于一個流量較大或者頻繁被“重新加載”的網頁，還是很有用的。

2，給鏈接做背景圖時，可以防止a:hover 時再載入背景圖片而導致的背景“閃爍”。個人覺得這一點在提升用戶體驗具有一定的意義。

3，圖片易于管理。前提是拼合的圖片有一定的規律。如下圖，就是一張“網站全部使用的按鈕背景”的圖片。這樣可以很直觀的看到網站中所有的按鈕樣式。(我個人喜歡按照圖片的一定“屬性”來拼圖片，一張圖片都是icon或者都是btn背景…這樣就可以順便管理圖片，且有一定規律可循的圖片，比較容易排列在一起。當然，有些時候，也會選擇按照“模塊”來拼合一張圖片，這樣在模塊化的結構中，就產生了一個簡單的邏輯：調用一個模塊，則調用上面的背景圖。否則，這張圖片就不被調用。可以有效的防止只用了一個小小的圖標，就調用了整個大圖片的問題。)

css sprites 適用范圍：

1，需要通過降低http請求數完成網頁加速。

2，網頁中含有大量小圖標。或者，某些圖標通用性很強。

3，網頁中有需要預載的圖片。主要是a與a:hover背景圖這種關系的。如果a與a:hover的背景圖分別加載，那么，就會出現用戶鼠標移到某個按鈕上，按鈕的背景突然消失再出來，產生“閃爍”，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產生按鈕“消失”了的錯覺。

需要滿足的條件

在網頁中，通過這項技術拼合在一起的圖片最好有一項規律。定寬或者定高。最好是寬高都能定下來。需要平鋪的圖片，顯然不適合sprite。

如上圖的buttons，就屬于定寬定高的情況。

定寬情況下，則可平行排列若干小圖片。定高，則縱向排列小圖片。

若背景既不定寬，也不定高情況下強行使用css sprites技術，則容易產生“不應該出現的圖片出現在頁面上”的狀態。若是“強行定高”，也將非常不利于日后的維護。

總結

這項技術好與不好并不能一概而論的。要視網站的具體情況而定。分析時首先決定自己“是否需要”，還要綜合開發成本，維護成本等問題。找到一個適合實際情況的方案再做定奪。及時要用sprites，建議也不要極端的將各種尺寸，各種對齊方式，各種用途圖片放在一起去維護。這樣的極端或許不能再減少幾個http請求數，反而為日后的維護埋下隱患。