ITPub博客

首页 > 应用开发 > IT综合 > 雪碧图的优缺点,你有哪些看法?

雪碧图的优缺点,你有哪些看法?

原创 IT综合 作者:千锋Python唐小强 时间:2020-05-22 17:13:50 0 删除 编辑

这道题实际上考的是前端性能优化的一个点。雪碧图的英文是 CSS Sprites。其目的是将多张比较小的图片,合并到一张大的图片上面,大的图片背景透明,使用的时候,通过把该张图片当做背景图片,通过不同的 background-position定位来展示的那部分图片。

好处

  1. 降低服务器压力。
  2. 减少网络请求,页面渲染更快。

缺点

  1. 后期维护困难,添加一张图片需要重新制作。
  2. 应用麻烦,每一张图都需要计算位置,通过调整位置来展示图片,对误差的要求很严格。
  3. 使用图片有局限,只能用在背景图片background-image上,不能用<img>标签来使用。

制作雪碧图


雪碧图的优缺点,你有哪些看法?

只需要将自己想要的图片上传上去,就可以生成右边的雪碧图了,下载图片,就可以引用了,可以直接复制坐标的css代码来引用图片。下面贴一个完整的例子:

<template>

 <div>
   <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>
 .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上面,很多网站都有很多小图标,这些小图标如果都是单独请求网络,务必会消耗很多玩网络资源(每次请求都会有一个连接与断开的时间消耗),但是比较大的图片,就不建议用雪碧图,因为图片太大,一次请求获取的数据量大,拿到这个大图需要的时间就长,降低了网页的整体体验。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69923331/viewspace-2693833/,如需转载,请注明出处,否则将追究法律责任。

全部评论

注册时间:2019-05-14

  • 博文量
    766
  • 访问量
    415928