高性能web网站优化原则1——尽可能的减少http请求

原文参见：https://developer.yahoo.com/performance/rules.html

尽可能的减少http请求
总所周知：终端用户响应时间只有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的模块，可以适当合并，灵活加载。