动态 Css Sprite 支付宝前端：伯阳 @Vingel

缘起

支付宝收银台的银行 logo 图片已经包含 100多家银行，图片大小为 102KB 。https://img.alipay.com/images/bankcss/bankicon.png

该图片占用整个页面大小的一半左右，严重地影响了页面加载速度。

大部分用户只展示从 1 个到 30 几个 logo ，因此需要做到按需加载。

典型用户

解决方案

解决方案：通过 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 插入到页面中。

后台方案

基于 C 语言的 Nginx 图片合并模块，根据请求个数动态拼接图片。

预处理好 png 图片格式，拼接图片时只需要拼接已经预加载在内存图片即可，减少服务器 IO 压力。

Q & A谢谢大家！ 伯阳 @Vingel