该文档探讨了支付宝前端中动态 CSS Sprite 的实现，以解决银行 logo 图片占用页面过大并影响加载速度的问题。通过 JavaScript 动态获取所需银行 logo 和图片合并模块，优化了页面性能。最后提供了预处理的 PNG 格式和服务器端动态拼接的解决方案。

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 压力。

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