刚在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的请求数,也没有达到优化,只是普通的实现功能而已。
该文作者用银行的例子
原文地址: http://www.slideshare.net/taobaoued/css-sprite-8581954
原理分析如下:
一般我们用sprite,是为了 减少http请求数,降低服务器压力,但是假如拼接的图片过多,拼出来的图片必然会变大,虽然说加载一次之后,其它页面就只需要调用这张图片,不必重复加载,但是 首次加载速度必然会慢。
打个比方:
一个网站需要200张图片,一张5K,200×5=1000k;但是一般浏览用户只需要用到30张,那么其它170张便是多余的,这样一般用户加载的时候就加载多了没必要的170×5=850K的东西,当然如果不用拼图,直接200张小图的话就要哪张调用哪张,但是这样就比拼图多了30-1=29的请求数,也没有达到优化,只是普通的实现功能而已。
该文作者用银行的例子
- 动态 Css Sprite
- 支付宝前端:伯阳 @Vingel
- 缘起
- 该图片占用整个页面大小的一半左右,严重地影响了页面加载速度。
- 大部分用户只展示从 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 压力