This problem is really about a point of front-end performance optimization. CSS Sprites. Its purpose is to combine several small pictures into a large picture with a transparent background. When using the picture, the part of the picture is displayed by taking the picture as the background picture and positioning it in different background-position.

benefits

  1. Reduce server stress.
  2. Fewer network requests, faster page rendering.

disadvantages

  1. Post maintenance is difficult, adding a picture needs to be re-made.
  2. Application is troublesome, each graph needs to calculate the position, by adjusting the position to show the picture, the error requirements are very strict.
  3. Images are limited and can only be used in background imagesbackground-imageGo, it doesn’t work<img>Tag to use.

Make Sprite drawings

Recommend a website for making Sprite pictures online: the website

Just need to upload the picture you want, you can generate the Sprite picture on the right, download the picture, you can reference, you can directly copy the coordinatecssCode to reference images. A complete example is posted below:

<template>
  <div class="cssSprites">
    <h1>CSS Sprite illustration</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>  Copy the code

It can be seen that the whole background image is referenced, which reduces the network request, but increases the memory consumption of the client to some extent. The position of the image is set through background-position to achieve the purpose of displaying the desired part of the background image.

Sprite image usage scenario

Main use above the icon of the site, many sites have a lot of small ICONS, these small icon if are separate request network, be sure to consume a lot of playing online resources (every request there is a connection and disconnection time consumption), but the larger picture, it is not recommended to use Sprite figure, because the picture is too big, a request for the amount of data, It takes too long to get this big picture, which detracts from the overall experience of the site.

Online experience Address: address

All source code is available at my warehouse address: address

Learning is like rowing upstream, not to advance is to fall back, the rapid development of front-end technology, if you don’t keep learning every day, you will not keep up, I will accompany you, every day to push blog, progress with you, I hope you can pay attention to me, the first time to receive the latest article.

Daily interview in front of public account:

This article is formatted using MDNICE