Guangzhou

Visit VisitCHN.com - China news, weather, business, travel, language courses

ABC links

Web开发中的性能:谈Google和Facebook的网站使用到的技术,图片预加载CSS Sprites

(January 11) http://www.handandaily.com

首先我要说的是博客园的速度打开的很慢,深圳南山的

如果你知道这种技术,那就不用进来了,

1.首先你先打开下面两个连接:(下面链接不是一般的图片,无毒无广告)


http://static.ak.facebook.com/images/sprite/icons.png?db3
http://www.google.com/images/nav_logo3.png

刚才在Google搜索的首页,发现在bodyonload里有这么一句:

if(document.images){new Image().src='/images/nav_logo3.png'}

那么来看看这个http://www.google.com/images/nav_logo3.png是个啥?

就是它:

Google.com's CSS Sprite



Css Sprites,就是将页面中所有css装饰图合并成一个较大的图,然后用到特定的css装饰图的时候就利用css的background-image:大图,background-position:小图在大图中的x位置,小图在大图中的y位置


优点:利用Css Sprites可以提升网站的性能,普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

按照yahoo的 rules for high performance web sites的原则,应当较少Client与Server端间的HTTP Request次数。

通过CSS Sprites方法将多张图片组装成单独的一张图片,可以有效减少HTTP请求的次数。




关于更多的CSS Sprites
http://www.handandaily.com/post/cat_8.html

posted on 2007-10-25 14:11 haix 阅读(1204) 评论(12)  编辑 收藏

评论

#1楼  2007-10-25 14:17 碎蜂      

网易邮箱也是这么做的   回复  引用  查看    

#2楼  2007-10-25 14:19 Handan [未注册用户]

去年Yahoo改版使用的技术原来就是这个   回复  引用    

#3楼  2007-10-25 14:22 dudu      

你是通过什么网络上网的?   回复  引用  查看    

#4楼  2007-10-25 14:24 kerry jiang [未注册用户]

不错,学习了..   回复  引用    

#5楼  2007-10-25 14:53 丁学      

呵呵,这个不错,试一下   回复  引用  查看    

#6楼  2007-10-25 15:11 路过 [未注册用户]

不记得从什么时候开始我就尽量这样做了。
那时候网站速度很不稳,作背景小图片又多,经常出现没有载入的情况.
可想而知版面又多糟糕,还有就是一些特效图片(比如鼠标覆盖时按钮的背景会换成另一个),常常是鼠标一滑过,就看见浏览器的载入标志在那闪呀闪,最后背景图载入失败,版面又乱了。
后来不知道在哪里看到关于 background-position 的资料,然后就尝试做了些调整。不过没有像网易,yahoo邮箱那样用的非常彻底。   回复  引用    

#7楼  2007-10-25 18:00 半山旅客      

路过。。。学习   回复  引用  查看    

#8楼  2007-10-25 20:01 丹心猪(Dansinge)      

不错   回复  引用  查看    

#9楼  2007-10-28 21:42 在线代理 [未注册用户]

不错的东西,又学习了一下。。   回复  引用    

#10楼  2007-10-29 09:45 Anders Liu      

发现在body的onload里有这么一句:

这句里“body”和“onload”上的“刮开有奖”效果是怎么实现的? :D :P :)   回复  引用  查看    

#11楼 [楼主] 2007-10-29 10:51 haix      

你有没有效果让我看一下呀,
  回复  引用  查看    

#12楼  2007-11-13 23:29 博览群书      

学习。   回复  引用  查看    

#13楼  2008-06-12 16:36 厨子      

受教了.又发现一个新招.   回复  引用  查看    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-01-12 09:20 编辑过


相关链接:
 
Visit VisitCHN.com - China news, weather, business, travel, language courses