背景

俗称CSS精灵图，当我们网页中频繁使用多种图标时，每个图标都需要向服务器请求图片，增加和占用请求数目一般浏览器同一域名下，最多同时支持6个GET/POST请求，其中最多GET请求数为1
这就会造成请求资源最大数目被占用，页面加载速度慢，服务器请求压力过大

介绍

而CSS精灵图的使用就解决了这个问题
其原理是将这些小图标整合成一张图片，而这张图片的储存小于等于小图标总和的，并且只需要请求一次即可获得所有小图标
而获得这张图片后通过background属性来截取其中的小图标展示

优缺点

优点

1. 利用精灵图可以有效减少网页的请求数，提高了页面加载速度核心优点
2. 合并成精灵图时，精灵图的存储空间一般小于被合并图片存储空间的总和

缺点

1. 合并精灵图时，需要经过繁琐合成的过程
   1. 要合并时要保留足够的空间，防止截取展示时出现其他图片的边角
2. 使用精灵图时，需要经过繁琐测量的过程核心缺点
   1. 需要借助photoshop或其他工具来精确测量背景单元的偏移
   2. 如果精灵图需要改动，可能导致所有测量要重新计算，难以维护