原文参见:https://developer.yahoo.com/performance/rules.html
[b]尽可能的减少http请求[/b]
总所周知:终端用户响应时间只有10-20%的时间是用来下载html页面,而80-90%的时间消耗在下载各种页面组件上,所以尽可能的减少http对服务器的请求是有效提高网站性能的方法之一
这些包括图像、脚本、css文件,flash等等。
1、采用image maps
image maps可以将多个url关联到一个图像上
2、CSS Sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
3、内联图像
例如:
或者可以把内联图像放入css里面,这样缓存到客户端,减少了http请求数
4、合并js和css
将页面用到的多个js合并为一个js文件,多个css文件合并为一个css文件,从而减少http请求数
这个可以灵活决策,如果合并之后的js很大的话,也是会增加下载压力的,毕竟有的页面只用到其中某个js的模块,可以适当合并,灵活加载。
[b]尽可能的减少http请求[/b]
总所周知:终端用户响应时间只有10-20%的时间是用来下载html页面,而80-90%的时间消耗在下载各种页面组件上,所以尽可能的减少http对服务器的请求是有效提高网站性能的方法之一
这些包括图像、脚本、css文件,flash等等。
1、采用image maps
image maps可以将多个url关联到一个图像上
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="cart.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="settings.html" title="Settings">
<area shape="rect" coords="141,0,171,31" href="help.html" title="Help">
</map>
2、CSS Sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
<style>
#navbar span {
width:31px;
height:31px;
display:inline;
float:left;
background-image:url(/images/spritebg.gif);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>
3、内联图像
例如:
<IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
或者可以把内联图像放入css里面,这样缓存到客户端,减少了http请求数
.home { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKA...);}
.gift { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCp...);}
.cart { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAADlCr...);}
.settings { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAA...);}
.help { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAALW1t...);}
4、合并js和css
将页面用到的多个js合并为一个js文件,多个css文件合并为一个css文件,从而减少http请求数
这个可以灵活决策,如果合并之后的js很大的话,也是会增加下载压力的,毕竟有的页面只用到其中某个js的模块,可以适当合并,灵活加载。