前言 這段時間比較的忙文章寫不是很勤希望大家諒解
上一篇文章主要講述了請求一個頁面的過程同時也提出了在這個過程中的一些優化點本篇就開始細化頁面的請求過程並且提出優化的方案同時在上篇文章中不少朋友也提出了一些問題在本篇中也對這些問題給出了回答！
HTTP請求的優化
在一個網頁的請求過程中其實整個頁面的html結構（就是頁面的那些html骨架）請求的時間是很短的一般是占整個頁面的請求時間的%%在頁面加載的其余的時間實際上就是在加載頁面中的那些flash圖片腳本的資源 一直到所有的資源載入之後整個頁面才能完整的展現在我們面前
下面我們就從一個頁面開始講述
<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
<title>小洋燕洋天</title>
<script type=text/javascript src=/demojs>
</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 //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
<title>小洋燕洋天</title>
<script type=text/javascript src=/demojs>
</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 //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
<title>小洋燕洋天</title>
<script type=text/javascript src=/demojs>
</script>
</head>
<body>
<div>
<img src= />
<img src= />
<img src=_//gif />
<img src=_//gif />
<img src= />
<img src= />
<img src= />
<img src= />
<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/11595.html
