【成都-第五十一期】什么是CSS Sprites

1.背景介绍...

1. 背景介绍在计算机图形学中，sprites指的是包含于场景中的二维图像或者动画。最开始这项技术是应用于街机游戏中，里面的人物和可移动物品大多数都是应用了sprites，为啥要叫sprites（精灵）呢？精灵并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中的数据之上，没有对其中的数据产生影响，就像幽灵和精灵一样。CSS精灵也差不多是这个意思，可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。那这项技术为啥能减少http请求呢？讲到这里就要提一下，浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。有同学可能会问了，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？还有一个好处，这样不但快了，还省流量了，因为HTTP请求-响应会在客户端和服务器端交互HTTP报文，所以下载一个图片所用流量不只是图片大小，每个HTTP报文会占用网络流量的。也许有同学会问，谁会在乎那点而流量，你别说还真有人在乎，如果你不是自己机房，而是把服务器放在别人机房就知道流量也是很贵的，如果你的网站每天被访问数十亿次，这点儿流量就会让你肉疼了，不知道大家看过Google首页Page Source没有，截取一部分，可以发现，人家连HTML的换行符、缩进、空格都给省了，你说图的是可读性吗。更别说对众多的手机用户了，流量都是钱呐！
2. 知识剖析一，如何实现CSS sprites1.我们需要找到需要使用的小图标，然后对图标进行切图，切出来我们需要的图片或者图标。2.将这些切好的图片拼接在一起,这里我们可以使用photoshop，但是更好的是很多前辈制作了许多sprites图生成工具，也就是俗称的雪碧图生成工具，具体的步骤可以看下面的视频。

二，应用到网页

好了，我们做好需要使用的雪碧图，现在需要将这个图应用到我们的网页中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。根据雪碧图中图标的具体像素大小，再规定元素的具体大小，然后使用background-position找到图标的位置。元素大小相当于相机机头，background-position相当于移动相机找到我们需要的景物，下面给大家简单的演示一下。

三，css sprites的优缺点

优点

上面也提到了，通过减少下载图片的数量以减少http请求数量，减少http报文，节省流量，增加访问速度，提高网页的性能。这是它最大的优点。

缺点

1. 每次制作雪碧图都很繁琐，增大前端和UI的工作量。
2. 雪碧图制作完成之后，维护特别困难，每次要加或者换图片都需要重新制作一整张图片。
3. 难以实现自适应，图片的大小都限定死了。

  综合考虑，一切为了性能，这些缺点只能忍受了，但是大家做雪碧图之前也要考虑清楚，哪些图片不适合使用雪碧图，综合考虑，合理使用。

3.常见问题

雪碧图如何自适应呢？

4.解决方案

这是个坑。。。。需要自适应的图片就不要使用雪碧图了嘛！

5.编码实战

用CSS sprites写一副扑克牌，具体习题在这个链接里面，这个蛮有趣的，大家有兴趣可以尝试下，可以更加熟悉CSS sprites的使用。

http://www.cnblogs.com/scgw/archive/2011/03/19/1988908.html

6.参考文献

1. Wiki百科 sprites
2. 简单实例让你快速掌握css sprites精髓

文本链接：

http://www.jianshu.com/p/d5ccebce7e00

ppt链接：

https://ptteng.github.io/PPT/PPT/css-06-CSS%20Sprites.html#/8

视频链接：

https://v.qq.com/x/page/n038430m8w1.html

    关注 葡萄藤IT技能树