动态 Css sprite

  • 2,699 views
Uploaded on

动态 Css sprite

动态 Css sprite

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,699
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
67
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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