你知道雪碧圖嗎？有哪些優缺點？

這道題實際上考的是前端性能優化的一個點。 雪碧圖的英文是CSS Sprites。 其目的是將多張比較小的圖片，合併到一張大的圖片上面，大的圖片背景透明，使用的時候，經過把該張圖片當作背景圖片，經過不一樣的 background-position定位來展現的那部分圖片。

好處

1. 下降服務器壓力。
2. 減小網絡請求，頁面渲染更快。

缺點

1. 後期維護困難，添加一張圖片須要從新制做。
2. 應用麻煩，每一張圖都須要計算位置，經過調整位置來展現圖片，對偏差的要求很嚴格。
3. 使用圖片有侷限，只能用在背景圖片 background-image上，不能用 <img>標籤來使用。

製做雪碧圖

推薦一個在線製做雪碧圖的網站:網站

只須要將本身想要的圖片上傳上去，就能夠生成右邊的雪碧圖了，下載圖片，就能夠引用了，能夠直接複製座標的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上面，不少網站都有不少小圖標，這些小圖標若是都是單獨請求網絡，務必會消耗不少玩網絡資源（每次請求都會有一個鏈接與斷開的時間消耗），可是比較大的圖片，就不建議用雪碧圖，由於圖片太大，一次請求獲取的數據量大，拿到這個大圖須要的時間就長，下降了網頁的總體體驗。

---

線上體驗地址: 地址

全部的源碼均可以在個人倉庫地址： 地址

學習如逆水行舟，不進則退，前端技術飛速發展，若是天天不堅持學習，就會跟不上，我會陪着你們，天天堅持推送博文，跟你們一同進步，但願你們能關注我，第一時間收到最新文章。

公衆號前端每日面試：

本文使用 mdnice 排版