這道題實際上考的是前端性能優化的一個點。
雪碧圖的英文是CSS Sprites。
其目的是將多張比較小的圖片，合併到一張大的圖片上面，大的圖片背景透明，使用的時候，通過把該張圖片當做背景圖片，通過不同的 background-position定位來展示的那部分圖片。
好處
- 降低服務器壓力。
- 減少網絡請求，頁面渲染更快。
缺點
- 後期維護困難，添加一張圖片需要重新制作。
- 應用麻煩，每一張圖都需要計算位置，通過調整位置來展示圖片，對誤差的要求很嚴格。
- 使用圖片有侷限，只能用在背景圖片
background-image上，不能用<img>標籤來使用。
製作雪碧圖
推薦一個在線製作雪碧圖的網站:https://www.toptal.com/developers/css/sprite-generator
只需要將自己想要的圖片上傳上去，就可以生成右邊的雪碧圖了，下載圖片，就可以引用了，可以直接複製座標的css代碼來引用圖片。
下面貼一個完整的例子：
<template>
<div class="cssSprites">
<h1>css雪碧圖演示</h1>
<ul>
<li v-for="item in moodList" :key="item" :class="item"></li>
</ul>
</div>
</template>
<script>
export default {
name: "cssSprites",
components: {},
data() {
return {
moodList: ['bg-mood_afraid', 'bg-mood_angry', 'bg-mood_calm', 'bg-mood_expect', 'bg-mood_happy', 'bg-mood_miss','bg-mood_nervous', 'bg-mood_sad', 'bg-mood_surprised']
}
},
methods: {
},
computed: {},
created: function () {}
}
</script>
<style lang="scss">
.cssSprites{
li {
display: inline-block;
}
.bg-mood_afraid {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -10px;
}
.bg-mood_angry {
width: 176px;
height: 176px;
background: url('../assets/img/css_sprites.png') -206px -10px;
}
.bg-mood_calm {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -206px;
}
.bg-mood_expect {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -206px -206px;
}
.bg-mood_happy {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -10px;
}
.bg-mood_miss {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -206px;
}
.bg-mood_nervous {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -10px -402px;
}
.bg-mood_sad {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -206px -402px;
}
.bg-mood_surprised {
width: 176px; height: 176px;
background: url('../assets/img/css_sprites.png') -402px -402px;
}
}
</style>
可以看到整個就引用了一張背景圖片，減少了網絡請求，但一定程度上增加了客戶端內存消耗，通過background-position來設置圖片的位置，達到顯示想要的部分背景圖的目的。
雪碧圖使用場景
主用在網站的icon上面，很多網站都有很多小圖標，這些小圖標如果都是單獨請求網絡，務必會消耗很多玩網絡資源（每次請求都會有一個連接與斷開的時間消耗），但是比較大的圖片，就不建議用雪碧圖，因爲圖片太大，一次請求獲取的數據量大，拿到這個大圖需要的時間就長，降低了網頁的整體體驗。
線上體驗地址:
https://jackzhujie.github.io/vue-study/#/cssSprites
所有的源碼都可以在我的倉庫地址：
https://github.com/jackzhujie/vue-study
學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。
公衆號前端每日面試：
