动态 Css sprite
Upcoming SlideShare
Loading in...5
×
 

动态 Css sprite

on

  • 2,773 views

动态 Css sprite

动态 Css sprite

Statistics

Views

Total Views
2,773
Views on SlideShare
2,673
Embed Views
100

Actions

Likes
3
Downloads
67
Comments
1

5 Embeds 100

http://luoxihua.com 81
http://www.luoxihua.com 15
http://luoxihua1025.ip98.6464.cn 2
http://www.d2forum.org 1
http://cache.baidu.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

动态 Css sprite 动态 Css sprite Presentation Transcript

  • 动态 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