周一、雾霾、寒冷、堵车、噪声，你悲伤也没用，还好我又准时的来跟你叨逼叨了。
有人的地方就有江湖，有问题的地方就有人解决问题，所以有问题的地方就有江湖，在前端的江湖里面，以前一直有这样一类问题，且听分解。
当在浏览器里输入一个URL地址的时候，你会感觉无数张图片“唰唰唰”的闪出来了。在这个过程中，浏览器会把这个网站的主资源（就是Html文件）拉取回来，然后开始分析网页中的Js，Img之类的标签，然后再去拉取这些图片和资源，这些后拉取的资源称为「子资源」。
「主资源」和「子资源」只是我们人类对资源定义的不同方式，其实对于浏览器来说，他们的请求方式都是发起一个Http请求，经历三次握手，并把文件拉取回来，一般的浏览器内核只能同时并发4，5个网络请求，所以大量的小图片特别影响性能，不但网页加载完成时间慢，还可能影响一些重要的JS逻辑，使得网页响应也变慢，卡死等等。对于浏览器来说，发起一个Http请求，来回几百毫秒的耗时，已经是相当高的资源耗费，只是人类不曾感受到，其实浏览器已经无数次喊叫：“太NMD慢了，哪个SB写的代码......”。
例如上图，一个网页的一小块区域，就三张小图标，浏览器要辛辛苦苦三次才能把这些小图标取回来，如果是50张呢，显然不可接受。面对这样的情况就只能束手就擒吗？显然优化的关键途径就是减少网络请求次数，并且还得把图片都下发下来，并能够灵活使用，那就把所有小图标拼成一张大图吧，如下图。
当前，用一次网络请求就可以下载下来三张图片了，而且文件的大小也较三张图片小一些（因为很多文件的格式信息和头信息已经共用了），大大降低了网络请求和带宽的消耗。然后呢，如何在Html或CSS中引用这些图片呢？
这就不得不提到一个CSS属性叫做background-position，利用Ta，可以指定图片的位置，也就能把这张图片作为一个背景放在某个位置了，我们来看两句CSS代码。
利用这个属性，来标识图片相对于容器的位置（图中的坐标分别标识X，Y两个方向的偏移，这些都是示意的值哦，不是真实的值），最后再把这个类选择器应用到相应的容器就好了。
这种技术就称为CSSSprite，中文翻译为雪碧图，Ta主要解决的是小图片过多以及耗费网络资源的问题，核心原理就是将图片合并成一张大图下发到客户程序，并利用属性来对其进行定位和切割的技术。
其实在游戏当中，很多也是利用了类似的思想，比如一个小人走路的时候，一共由8张图片组成，那么一般这8张图片会合并为一张大图，每一帧都循环播放这张大图中的不同坐标下的小图片来构建小人的行走动作。
其实在追求高性能的app中，很多也是利用了类似的思想，比如对性能极致要求的话，一个Titlebar上有5个icon，那5个icon是可以合并为一张大图的，这样只会有一次IO，减少了IO次数，会对效率提升比较大，分割图片都是内存操作，会非常迅速。
虽然叫雪碧图，但记得和我们喝的雪碧完全没关系哦！
果果这烂天，还能不能有诗和远方了