动态 Css Sprite

刚在D2前端论坛看到一个ppt，做的有点简陋，不过很有思想，叫： 动态 Css Sprite。
原文地址： http://www.slideshare.net/taobaoued/css-sprite-8581954

原理分析如下：
一般我们用sprite，是为了 减少http请求数，降低服务器压力，但是假如拼接的图片过多，拼出来的图片必然会变大，虽然说加载一次之后，其它页面就只需要调用这张图片，不必重复加载，但是 首次加载速度必然会慢。

打个比方：
一个网站需要200张图片，一张5K，200×5=1000k；但是一般浏览用户只需要用到30张，那么其它170张便是多余的，这样一般用户加载的时候就加载多了没必要的170×5=850K的东西，当然如果不用拼图，直接200张小图的话就要哪张调用哪张，但是这样就比拼图多了30-1=29的请求数，也没有达到优化，只是普通的实现功能而已。

该文作者用银行的例子

1. 动态 Css Sprite
   • 支付宝前端：伯阳 @Vingel
2. 缘起
   • 支付宝收银台的银行 logo 图片已经包含 100 多家银行，图片大小为 102KB 。 https://img.alipay.com/images/bankcss/bankicon.png
   • 
     
     
   • 该图片占用整个页面大小的一半左右，严重地影响了页面加载速度。
   • 大部分用户只展示从 1 个到 30 几个 logo ，因此需要做到按需加载（需要哪个加载哪个，然后拼接）。
3. 典型用户
4. 解决方案
   • 解决方案：通过 Javascript 获取当前页面中所有展示的银行个数，然后根据银行缩写去获取后台图片：
   • http://apimg.alipay.com/combo.png?d=cashier&t=ABC,BOC,CMB
   • http://apimg.alipay.com/combo.png?d=cashier&t=ABC,BOC,CEB,CIB,CITIC,CMB,CMBC
   • 最后通过 Javascript 生成相应的 CSS 插入到页面中。
5. 后台方案
   • 基于 C 语言的 Nginx 图片合并模块，根据请求个数动态拼接图片。
   • 预处理好 png 图片格式，拼接图片时只需要拼接已经预加载在内存图片即可，减少服务器 IO 压力