為什么要使用Css Sprite？

1. Css Sprite的起因

圖標原來是怎樣的就讓它怎樣好啦？為什么要多此一舉把它們集合到一張圖里去呢？

其實，這和網頁的加載請求有關，一般來說一個網站里并不僅僅只有一兩個小圖標，假如某個網站的首頁一共有十個小圖標，那么加載這個網頁的時候你的電腦就會發送十個請求。

每個請求回來的響應就是一張小圖標圖片。但是如果把這些小圖標都放在一張大圖里，那么就只需發送一個請求。

看到這里你會不會有一些疑惑：雖然十個請求變成了一個請求，但是圖片大小也變成了十倍，這樣的話還是沒有實質性的改變啊。

其實瀏覽器同一時間加載的資源數是有限的，如果一次性加載十個圖標，瀏覽器就不會在同一時間繼續加載別的資源了，減少了頁面的請求次數，也自然就提高了頁面的加載速度。

2. 舉個例子

舉個生活中的案例來方便大家理解：

如果冰箱里有你想吃的十個藍莓，你是會每次拿過來一個然后跑十次呢？還是會一次性把十個藍莓都拿過來呢？

雖然說一次性拿十個看似拿的東西變多了，但因為藍莓這種東西本來就又輕又小，所以一次拿十個比一次拿一個跑十趟劃算多了。

而且我們大部分人用手機的時間都超過了用電腦的時間，在移動端依賴的是速度相對較慢的無線網絡，甚至有可能是在電梯或者地鐵這種信號不穩定的地方去訪問網站。

在這種情況下將多張圖片合并到一張圖片后，只需一次網絡請求就可以將所需的源資源全部下載，減小建立連接的消耗，這在移動端的優勢尤為明顯。

3. Css Sprite的優勢

• 減少網頁的 http 請求。 利用Css Sprite能夠很好地減少網頁的 http 請求，從而大大的提高頁面的性能，這也是其最大的優點，也是其被廣泛傳播和應用的主要原因。

• 減少圖片的大小。 Css Sprite能夠減少圖片的大小，3 張圖片合并成 1 張圖片的大小比這 3 張圖片加起來的大小還要小。

• 簡化圖片命名。 解決了在圖片命名上的困擾，只需對一張Css Sprite命名就可以了，不需要對每一個小元素進行命名，從而減少了掉頭發的次數。

• 方便更換主題。 只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。

4. 小結

綜上所述，我們已經了解了為什么要"多此一舉"的把小圖片都集合在大圖片里。

不過外界有一些傳言說隨著 HTTP2 的到來，這種技術已經過時了。

那么這些傳言是否為真呢？請看下一小節。