加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

动态 Css Sprite

(2011-07-18 14:38:57)
标签:

动态

css

sprite

优化

减少http请求

加载

速度

it

分类: CSS
刚在D2前端论坛看到一个ppt,做的有点简陋,不过很有思想,叫:动态 Css Sprite
原文地址:http://www.slideshare.net/taobaoued/css-sprite-8581954

原理分析如下:
一般我们用sprite,是为了减少http请求数,降低服务器压力,但是假如拼接的图片过多,拼出来的图片必然会变大,虽然说加载一次之后,其它页面就只需要调用这张图片,不必重复加载,但是首次加载速度必然会慢

打个比方:
一个网站需要200张图片,一张5K,200×5=1000k;但是一般浏览用户只需要用到30张,那么其它170张便是多余的,这样一般用户加载的时候就加载多了没必要的170×5=850K的东西,当然如果不用拼图,直接200张小图的话就要哪张调用哪张,但是这样就比拼图多了30-1=29的请求数,也没有达到优化,只是普通的实现功能而已。

该文作者用银行的例子

  1. 动态 Css Sprite
    • 支付宝前端:伯阳 @Vingel
  2. 缘起
    • 支付宝收银台的银行 logo 图片已经包含 100 多家银行,图片大小为 102KB 。 https://img.alipay.com/images/bankcss/bankicon.png
    • 动态 <wbr>Css <wbr>Sprite

    • 该图片占用整个页面大小的一半左右,严重地影响了页面加载速度。
    • 大部分用户只展示从 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 压力







0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有