HTTP請求的優化
在一個網頁的請求過程中其實整個頁面的html結構(就是頁面的那些html骨架)請求的時間是很短的一般是占整個頁面的請求時間的%%在頁面加載的其余的時間實際上就是在加載頁面中的那些flash圖片腳本的資源 一直到所有的資源載入之後整個頁面才能完整的展現在我們面前
下面我們就從一個頁面開始講述:
<!DOCTYPE html PUBLIC
//W
C//DTD XHTML
Transitional//EN
transitional
dtd
>
<html xmlns=
>
<head>
<title>小洋
燕洋天</title>
<script type=
text/javascript
src=
/demo
js
>
</script>
</head>
<body>
<div>
<img src=
/images/
gif
/>
<img src=
/images/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
</div>
</body>
</html>
如果我們向服務器請求這個頁面客戶端的浏覽器首先請求到的數據就是html骨架即:
<!DOCTYPE html PUBLIC
//W
C//DTD XHTML
Transitional//EN
transitional
dtd
>
<html xmlns=
>
<head>
<title>小洋
燕洋天</title>
<script type=
text/javascript
src=
/demo
js
>
</script>
</head>
<body>
<div>
<img src=
/images/
gif
/>
<img src=
/images/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
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骨架的時間是很短的其余藍色的線就表示了圖片腳本資源加載所花的時間
很顯然這樣頁面的整個加載時間就很長了因為頁面的加載幾乎是順序的載入時間就是所有資源加載時間的總和
下面我們把上面的頁面代碼代為如下:
<!DOCTYPE html PUBLIC
//W
C//DTD XHTML
Transitional//EN
transitional
dtd
>
<html xmlns=
>
<head>
<title>小洋
燕洋天</title>
<script type=
text/javascript
src=
/demo
js
>
</script>
</head>
<body>
<div>
<img src=
/>
<img src=
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
/>
<img src=
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
<img src=
_
/
/
gif
/>
</div>
</body>
</html>
我們再來看看頁面的加載時間圖
這就是所謂的並行載入了
比較一下兩段代碼的不同:其實就在img的src屬性上面:
第一段頁面的代碼:img的src屬性都是指向一個域名的
第二段頁面的代碼:img的src屬性指向了不同的域名
這樣做的結果是什麼?
請大家注意比較img的src的不同
解釋之前首先來看一個小的常識(在上篇文章中也提過):
當頁面請求向服務器請求資源的時候如果浏覽器已經在客戶端和服務器之前打開了一個tcp連接而且請求的資源也在開了連接的服務器上那麼以後資源的請求就會充分的利用這個連接去獲取資源 這樣也就是第一個時間圖的由來
如果請求的圖片分別位於不同的服務器網站或者那個請求的服務器網站有多個域名那麼因為浏覽器就會為每一個域名去開一個tcp連接發送http請求這樣結果就是同時開了多tcp連接這也是第二個時間圖的由來
雖然說並行加載確實使得頁面的載入快了不少但是也不是每一個圖片或者其他的資源都去搞一個不同的域名像之前的第二個並行載入圖片的例子也是讓兩個圖片利用一個tcp連接如果每個圖片都去開一個連接這樣浏覽器就開了很多個連接也是很費資源的而且浏覽器還可能會僵死而且有時還會嚴重的影響性能
所以這是需要權衡的
除了上面的優化方式還有其他的圖片優化的加載方式主要是通過減少http的請求達到優化
大家都知道網站的一個menu菜單有些菜單就是用圖片作出來的如
如果上面的圖片一個個載入勢必影響速度如果開多和請求有點得不償失而且圖片也不是很大那麼就一次把整個menu需要的圖片作為整個圖片一次加載然後通過map的方式控制點擊圖片的位置來達到導航的效果
這樣一個問題就是:算出圖片的坐標不能點擊了主頁圖片然後卻跳到了幫助頁面了
From:http://tw.wingwit.com/Article/program/net/201311/13993.html
