你知道雪碧图吗？有哪些优缺点？

这道题实际上考的是前端性能优化的一个点。
雪碧图的英文是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上面，不少网站都有不少小图标，这些小图标若是都是单独请求网络，务必会消耗不少玩网络资源（每次请求都会有一个链接与断开的时间消耗），可是比较大的图片，就不建议用雪碧图，由于图片太大，一次请求获取的数据量大，拿到这个大图须要的时间就长，下降了网页的总体体验。

---

线上体验地址:
地址

全部的源码均可以在个人仓库地址：
地址

学习如逆水行舟，不进则退，前端技术飞速发展，若是天天不坚持学习，就会跟不上，我会陪着你们，天天坚持推送博文，跟你们一同进步，但愿你们能关注我，第一时间收到最新文章。

公众号：