0
动态 Css Sprite  <ul><li>支付宝前端:伯阳  @Vingel </li></ul>
缘起 <ul><li>支付宝收银台的银行 logo 图片已经包含 100 多家银行,图片大小为  102KB 。 https://img.alipay.com/images/bankcss/bankicon.png </li></ul><ul>...
典型用户
解决方案 <ul><li>解决方案:通过 Javascript  获取当前页面中所有展示的银行个数,然后根据银行缩写去获取后台图片: </li></ul><ul><li>http://apimg.alipay.com/combo.png?d=c...
后台方案 <ul><li>基于  C  语言的  Nginx  图片合并模块,根据请求个数动态拼接图片。 </li></ul><ul><li>预处理好  png  图片格式,拼接图片时只需要拼接已经预加载在内存图片即可,减少服务器  IO 压力...
Q & A 谢谢大家! 伯阳  @Vingel
Upcoming SlideShare
Loading in...5
×

动态 Css sprite

2,775

Published on

动态 Css sprite

Published in: Technology, Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,775
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
69
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "动态 Css sprite"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×