sprites是鬼怪，小妖精，调皮鬼的意思，初听这个高端洋气的名字我被震慑住了，一步步掀开其面纱后发觉很简单的东西，作用却很大
神马是CSS 小妖精
CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
使用过jQuery UI 的同学可定见过这种图片
很多页面常用的小图标，但是我们看看每个小图标的源码的时候会发现，这些小图标的src是同一个文件，都是这张大图
为什么要使用CSS小妖精
姑且先不管这是怎么实现的，我们先来了解一下又好好的方法它不用为什么要用这种怪异的方式，在代码书写和可读性上都有了一定程度的开销，这么干有什么好处能让人们放弃安逸的做法来用CSS sprites呢？
我们知道浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。
而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。
所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。有同学可能会问了，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？
公司小伙伴儿问过我类似问题，我举了个例子，我在北京，你是我的马仔，有天我读了苏东坡文集，兴致来了想吃广东的荔枝，自然是马仔去买，然后你去银行取钱，坐地铁、搭火车、开飞机跑到广东买了串荔枝回北京，拎一串荔枝回来不太累，主要是北京到广州太折腾，明天我又来兴致了，再给我买一串差不多的来，你又去银行取钱、跑一趟广州，不料我读了一个月的苏东坡文集，你要是天天这么跑不得发疯，大家都会想到，看你这么爱吃荔枝，一次买一箱回来，拎着是有些累，但好过一次次的折腾。
