大家好浸须，我是前端西瓜哥。今天來隨意聊聊雪碧圖邦泄。
雪碧圖是什么删窒？
雪碧圖，英文原名叫 CSS sprites顺囊。
sprite 指的是精靈肌索。
我們喝的雪碧，它的英文也是 sprite特碳，應(yīng)該直譯為 “精靈” 的诚亚。但要符合中國市場，因為你不能說我喝的飲料叫“精靈”午乓，那特別怪站宗。于是就走音譯的路線，翻譯成 “雪碧” 了益愈。
所以雪碧圖更正確的叫法應(yīng)該是 “精靈圖”梢灭。
那為什么叫精靈呢？
做 2D 游戲的時候蒸其，有一個術(shù)語叫做 sprite敏释，其實就是融合了各種資源的圖片，圖片里面可能會有一個角色的一套動作摸袁、或是組成背景的不同內(nèi)容的塊 tile 等等钥顽。
游戲角色的行為（攻擊、跳躍但惶、蹲下等）耳鸯，表現(xiàn)出來其實就是不同圖片的切換，狀態(tài)很多膀曾，對應(yīng)的圖片很多县爬，這樣的話我們就要保存非常多的圖片，這不太好維護（但也不是不可以）添谊。
所以通常會將這個角色的所有動作放到一個圖片上财喳，當角色行為發(fā)生變化時，就修改位置和寬高信息截取到對應(yīng)的狀態(tài)圖片扎瓶。
前端說，那我也可以這樣搞嘛概荷，我們把一些小圖片（比如圖標）也都整合到一張大圖片碌燕，然后你通過 background-position 等屬性使用你需要的區(qū)域就好了。
然后我們在使用的地方用 background-position 設(shè)置好位置：
雪碧圖的作用
雪碧圖的主要作用是減少 HTTP 請求數(shù)量。
假如你有 100 張小圖片慈鸠，你要發(fā)起 100 個請求。如果你合并成一個大圖片譬巫，那你只需要發(fā)一個請求。
這在 HTTP/1 上是有不錯的優(yōu)化效果的缕题，因為 HTTP/1 下不能充分利用 TCP 帶寬胖腾，一個 TCP 同時只能有一個請求，請求太多就要排隊锨阿，導致嚴重的阻塞记罚。
到了 HTTP/2 因為多路復用特性的緣故，則沒有太大必要了末早，所有的請求都是通過流的方式打散發(fā)送的说庭，充分利用 TCP 的帶寬。
另一個作用是 提前加載好需要用到的圖片姿搜。
假設(shè)我們的一個按鈕是用圖片做的寡润，hover 時會替換圖片梭纹。如果分成獨立的兩個圖片致份，hover 就會出現(xiàn)閃爍的效果。
這是因為圖片還沒有下載好瞬沦，在圖片完成下載前雇锡，顯示的是空白锰提，直到圖片下載完成才替換上圖片。
如果我們將按鈕的所有狀態(tài)都放到雪碧圖了立肘，就不會有這個問題了名扛。當然還有一種方式就是通過 JS 手動做其他狀態(tài)小圖片的緩存。
結(jié)尾
雪碧圖其實和雪碧沒關(guān)系融蹂，它和 sprite（精靈）有關(guān)系弄企。
sprite 是一種將多個圖片資源合并成一張大圖片的做法，用到網(wǎng)頁意乓，能減少 HTTP 請求數(shù)量约素，以及提前加載一些還未使用的小圖片。
我是前端西瓜哥圣猎，關(guān)注我，學習更多前端知識为障。
