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

這道題實際上考的是前端性能優化的一個點。
雪碧圖的英文是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上面，不少網站都有不少小圖標，這些小圖標若是都是單獨請求網絡，務必會消耗不少玩網絡資源（每次請求都會有一個鏈接與斷開的時間消耗），可是比較大的圖片，就不建議用雪碧圖，由於圖片太大，一次請求獲取的數據量大，拿到這個大圖須要的時間就長，下降了網頁的總體體驗。

---

線上體驗地址:
地址

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

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

公衆號：