动态 css sprite
DESCRIPTION
动态 Css spriteTRANSCRIPT
![Page 1: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/1.jpg)
动态 Css Sprite 支付宝前端:伯阳 @Vingel
![Page 2: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/2.jpg)
缘起
支付宝收银台的银行 logo 图片已经包含 100多家银行,图片大小为 102KB 。https://img.alipay.com/images/bankcss/bankicon.png
该图片占用整个页面大小的一半左右,严重地影响了页面加载速度。
大部分用户只展示从 1 个到 30 几个 logo ,因此需要做到按需加载。
![Page 3: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/3.jpg)
典型用户
![Page 4: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/4.jpg)
解决方案
解决方案:通过 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 插入到页面中。
![Page 5: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/5.jpg)
后台方案
基于 C 语言的 Nginx 图片合并模块,根据请求个数动态拼接图片。
预处理好 png 图片格式,拼接图片时只需要拼接已经预加载在内存图片即可,减少服务器 IO 压力。
![Page 6: 动态 Css sprite](https://reader030.vdocuments.net/reader030/viewer/2022012302/555a23a3d8b42a900d8b46bf/html5/thumbnails/6.jpg)
Q & A谢谢大家! 伯阳 @Vingel