HTTP请求的优化在一个网页的请求过程中其实整个页面的html结构(就是页面的那些html骨架)请求的时间是很短的一般是占整个页面的请求时间的%%在页面加载的其余的时间实际上就是在加载页面中的那些flash图片脚本的资源 一直到所有的资源载入之后整个页面才能完整的展现在我们面前
下面我们就从一个页面开始讲述:
<!DOCTYPEhtmlPUBLIC//WC//DTDXHTMLTransitional//ENtransitionaldtd>
<htmlxmlns=>
<head>
<title>小洋燕洋天</title>
<scripttype=text/javascriptsrc=/demojs>
</script>
</head>
<body>
<div>
<imgsrc=/images/gif/>
<imgsrc=/images/gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
</div>
</body>
</html>
如果我们向服务器请求这个页面客户端的浏览器首先请求到的数据就是html骨架即:
<!DOCTYPEhtmlPUBLIC//WC//DTDXHTMLTransitional//ENtransitionaldtd>
<htmlxmlns=>
<head>
<title>小洋燕洋天</title>
<scripttype=text/javascriptsrc=/demojs>
</script>
</head>
<body>
<div>
<imgsrc=/images/gif/>
<imgsrc=/images/gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
</div>
</body>
</html>
在此之前首先来普及一下页面加载的小知识:
当页面的html骨架载入了之后浏览器就开始解析页面中标签从上到下开始解析
首先是head标签的解析如果发现在head中有要引用的js脚本那么浏览器此时就开始请求脚本此时整个页面的解析过程就停了下来一直到js请求完毕
之后页面接着向下解析如解析body标签如果在body中有img标签那么浏览器就会请求img的src对应的资源如果有多个img标签那么浏览器就一个个的解析解析不会像js那样等待的如果发现img的url地址是同一个地址那么浏览器就会充分的利用这个已经打开的tcp连接顺序的去一个个的请求图片如果发现有的img的url地址不同那么浏览器就另开tcp连接发送http请求
注意之前请求js的区别:请求需要js浏览器会一直等待不在解析下面的html标签
但是解析到img的时候尽管此时需要加载图片但是页面的解析过程还是会继续下去的然后决定是否发送新的tcp连接加载资源
大家可能觉得这个之前的代码片段一样确实代码是一样的但是在最开始的时候发送到浏览器中的只是那些html的代码任何的js脚本和图片还没有发送过来
当html代码到了浏览器中那么浏览器就开始一步步的解析这些代码了只要遇到了需要加载的资源浏览器就向服务器发出http请求请求所需的资源
整个页面的加载时间图如下:
大家从图中可以看出:
第一条线中分为一半黄色和一半蓝色其实黄色的部分就代表了打开一个tcp连接花的时间而后面的蓝色的部分就是请求整个html骨架文档的时间可以看出请求html骨架的时间是很短的其余蓝色的线就表示了图片脚本资源加载所花的时间
很显然这样页面的整个加载时间就很长了因为页面的加载几乎是顺序的载入时间就是所有资源加载时间的总和
下面我们把上面的页面代码代为如下:
<!DOCTYPEhtmlPUBLIC//WC//DTDXHTMLTransitional//ENtransitionaldtd>
<htmlxmlns=>
<head>
<title>小洋燕洋天</title>
<scripttype=text/javascriptsrc=/demojs>
</script>
</head>
<body>
<div>
<imgsrc=/>
<imgsrc=/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=/>
<imgsrc=/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
<imgsrc=_//gif/>
</div>
</body>
</html>
我们再来看看页面的加载时间图
这就是所谓的并行载入了
比较一下两段代码的不同:其实就在img的src属性上面:
第一段页面的代码:img的src属性都是指向一个域名的
第二段页面的代码:img的src属性指向了不同的域名
这样做的结果是什么?
请大家注意比较img的src的不同
解释之前首先来看一个小的常识(在上篇文章中也提过):
当页面请求向服务器请求资源的时候如果浏览器已经在客户端和服务器之前打开了一个tcp连接而且请求的资源也在开了连接的服务器上那么以后资源的请求就会充分的利用这个连接去获取资源 这样也就是第一个时间图的由来
如果请求的图片分别位于不同的服务器网站或者那个请求的服务器网站有多个域名那么因为浏览器就会为每一个域名去开一个tcp连接发送http请求这样结果就是同时开了多tcp连接这也是第二个时间图的由来
虽然说并行加载确实使得页面的载入快了不少但是也不是每一个图片或者其他的资源都去搞一个不同的域名像之前的第二个并行载入图片的例子也是让两个图片利用一个tcp连接如果每个图片都去开一个连接这样浏览器就开了很多个连接也是很费资源的而且浏览器还可能会僵死而且有时还会严重的影响性能
所以这是需要权衡的
除了上面的优化方式还有其他的图片优化的加载方式主要是通过减少http的请求达到优化
大家都知道网站的一个menu菜单有些菜单就是用图片作出来的如
如果上面的图片一个个载入势必影响速度如果开多和请求有点得不偿失而且图片也不是很大那么就一次把整个menu需要的图片作为整个图片一次加载然后通过map的方式控制点击图片的位置来达到导航的效果
这样一个问题就是:算出图片的坐标不能点击了主页图片然后却跳到了帮助页面了
