為什么要使用雪碧圖？

1. 雪碧圖的起因

圖標(biāo)原來(lái)是怎樣的就讓它怎樣好啦？為什么要多此一舉把它們集合到一張圖里去呢？

其實(shí)，這和網(wǎng)頁(yè)的加載請(qǐng)求有關(guān)，一般來(lái)說(shuō)一個(gè)網(wǎng)站里并不僅僅只有一兩個(gè)小圖標(biāo)，假如某個(gè)網(wǎng)站的首頁(yè)一共有十個(gè)小圖標(biāo)，那么加載這個(gè)網(wǎng)頁(yè)的時(shí)候你的電腦就會(huì)發(fā)送十個(gè)請(qǐng)求。

每個(gè)請(qǐng)求回來(lái)的響應(yīng)就是一張小圖標(biāo)圖片。但是如果把這些小圖標(biāo)都放在一張大圖里，那么就只需發(fā)送一個(gè)請(qǐng)求。

看到這里你會(huì)不會(huì)有一些疑惑：雖然十個(gè)請(qǐng)求變成了一個(gè)請(qǐng)求，但是圖片大小也變成了十倍，這樣的話(huà)還是沒(méi)有實(shí)質(zhì)性的改變啊。

其實(shí)瀏覽器同一時(shí)間加載的資源數(shù)是有限的，如果一次性加載十個(gè)圖標(biāo)，瀏覽器就不會(huì)在同一時(shí)間繼續(xù)加載別的資源了，減少了頁(yè)面的請(qǐng)求次數(shù)，也自然就提高了頁(yè)面的加載速度。

2. 舉個(gè)例子

舉個(gè)生活中的案例來(lái)方便大家理解：

如果冰箱里有你想吃的十個(gè)藍(lán)莓，你是會(huì)每次拿過(guò)來(lái)一個(gè)然后跑十次呢？還是會(huì)一次性把十個(gè)藍(lán)莓都拿過(guò)來(lái)呢？

雖然說(shuō)一次性拿十個(gè)看似拿的東西變多了，但因?yàn)樗{(lán)莓這種東西本來(lái)就又輕又小，所以一次拿十個(gè)比一次拿一個(gè)跑十趟劃算多了。

而且我們大部分人用手機(jī)的時(shí)間都超過(guò)了用電腦的時(shí)間，在移動(dòng)端依賴(lài)的是速度相對(duì)較慢的無(wú)線(xiàn)網(wǎng)絡(luò)，甚至有可能是在電梯或者地鐵這種信號(hào)不穩(wěn)定的地方去訪(fǎng)問(wèn)網(wǎng)站。

在這種情況下將多張圖片合并到一張圖片后，只需一次網(wǎng)絡(luò)請(qǐng)求就可以將所需的源資源全部下載，減小建立連接的消耗，這在移動(dòng)端的優(yōu)勢(shì)尤為明顯。

3. 雪碧圖的優(yōu)勢(shì)

• 減少網(wǎng)頁(yè)的 http 請(qǐng)求。 利用雪碧圖能夠很好地減少網(wǎng)頁(yè)的 http 請(qǐng)求，從而大大的提高頁(yè)面的性能，這也是其最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因。

• 減少圖片的大小。 雪碧圖能夠減少圖片的大小，3 張圖片合并成 1 張圖片的大小比這 3 張圖片加起來(lái)的大小還要小。

• 簡(jiǎn)化圖片命名。 解決了在圖片命名上的困擾，只需對(duì)一張雪碧圖命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而減少了掉頭發(fā)的次數(shù)。

• 方便更換主題。 只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

4. 小結(jié)

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

不過(guò)外界有一些傳言說(shuō)隨著 HTTP2 的到來(lái)，這種技術(shù)已經(jīng)過(guò)時(shí)了。

那么這些傳言是否為真呢？請(qǐng)看下一小節(jié)。