大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网css任务7，深度思考中的知识点——什么是CSS SPRITES？
1.背景介绍
在计算机图形学中，sprites指的是包含于场景中的二维图像或者动画。
最开始这项技术是应用于街机游戏中，里面的人物和可移动物品大多数都是应用了sprites，为啥要叫sprites（精灵）呢？
精灵并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中的数据之上，没有对其中的数据产生影响，就像幽灵和精灵一样。
CSS精灵也差不多是这个意思，可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。
2.知识剖析
那这项技术为啥能减少http请求呢？
到这里就要提一下，浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。
而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。
所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。有同学可能会问了，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？
还有一个好处，这样不但快了，还省流量了，因为HTTP请求-响应会在客户端和服务器端交互HTTP报文，所以下载一个图片所用流量不只是图片大小，每个HTTP报文会占用网络流量的。也许有同学会问，谁会在乎那点而流量，你别说还真有人在乎，如果你不是自己机房，而是把服务器放在别人机房就知道流量也是很贵的，如果你的网站每天被访问数十亿次，这点儿流量就会让你肉疼了。更别说对众多的手机用户了，流量都是钱呐！
3.常见问题
如何实现CSS sprites
4.解决方案
1.我们需要找到需要使用的小图标，然后对图标进行切图，切出来我们需要的图片或者图标。
2.将这些切好的图片拼接在一起,这里我们可以使用photoshop，但是更好的是很多前辈制作了许多sprites图生成工具，也就是俗称的雪碧图生成工具，下面我给大家演示一下。
好了，我们做好需要使用的雪碧图，现在需要将这个图应用到我们的网页中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。根据雪碧图中图标的具体像素大小，再规定元素的具体大小，然后使用background-position找到图标的位置。元素大小相当于相机机头，background-position相当于移动相机找到我们需要的景物，下面给大家简单的演示一下。
1. 假设合成之后的雪碧图宽是 W1, 需要显示的子图片宽度是 W2, 以子图为背景的标签宽度是 W3，background-size的宽度是x
2. 有公式 x/W3 = W1/W2 => x = W1*W3/W2
3. 所以 background-size 的宽度值为 W1*W3/W2
优点
上面也提到了，通过减少下载图片的数量以减少http请求数量，减少http报文，节省流量，增加访问速度，提高网页的性能。这是它最大的优点。
缺点
1.每次制作雪碧图都很繁琐，增大前端和UI的工作量。
2.雪碧图制作完成之后，维护特别困难，每次要加或者换图片都需要重新制作一整张图片。
3.难以实现自适应，图片的大小都限定死了。
4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
5.编码实战
6.扩展思考
雪碧图如何自适应
雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸
把整图整体缩放
...你别用雪碧图啊 不要死心眼 就是这样
雪碧图常用在哪里
CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。
7.参考文献
参考一：Wiki百科 sprites
参考二：雪碧图如何自适应
视频链接 密码: 5wvx
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：12361358，或者你可以直接点击此链接：http://www.jnshu.com/login/1/12361358
