構建高性能ASP.NET站點之優化HTTP請求

作者: 小洋（燕洋天) 來源: 博客園發布時間: 2011-02-28 21:53 閱讀: 1326 次推薦: 0 原文鏈接 [收藏]

摘要：本篇就開始細化頁面的請求過程并且提出優化的方案.

　　本篇就開始細化頁面的請求過程并且提出優化的方案.同時,在上篇文章中,不少朋友也提出了一些問題,在本篇中也對這些問題給出了回答!

　　本篇的議題如下:

　　HTTP請求的優化

　　HTTP請求的優化

　　在一個網頁的請求過程中,其實整個頁面的html結構(就是頁面的那些html骨架)請求的時間是很短的,一般是占整個頁面的請求時間的10%-20%.在頁面加載的其余的時間實際上就是在加載頁面中的那些flash,圖片,腳本的資源. 一直到所有的資源載入之后,整個頁面才能完整的展現在我們面前.

　　下面,我們就從一個頁面開始講述:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2  <html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4     <title>小洋,燕洋天</title>
5
6     <script type="text/javascript" src="../demo.js">
7     </script>
8
9  </head>
10  <body>
11     <div>
12         <img src="../images/1.gif" />
13         <img src="../images/2.gif" />
14         <img src="http://yanyangtian.cnblogs.com/image/3.gif" />
15         <img src="http://yanyangtian.cnblogs.com/image/4.gif" />
16         <img src="http://yanyangtian.cnblogs.com/image/5.gif" />
17         <img src="http://yanyangtian.cnblogs.com/image/6.gif" />
18         <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
19         <img src="http://yanyangtian.cnblogs.com/image/8.gif" />
20         <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
21         <img src="http://yanyangtian.cnblogs.com/image/8.gif" />
22     </div>
23  </body>
24  </html>
25

　　如果我們向服務器請求這個頁面,客戶端的瀏覽器首先請求到的數據就是html骨架,即:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title>小洋,燕洋天</title>
5
6     <script type="text/javascript" src="../demo.js">
7     </script>
8
9 </head>
10 <body>
11     <div>
12         <img src="../images/1.gif" />
13         <img src="../images/2.gif" />
14         <img src="http://yanyangtian.cnblogs.com/image/3.gif" />
15         <img src="http://yanyangtian.cnblogs.com/image/4.gif" />
16         <img src="http://yanyangtian.cnblogs.com/image/5.gif" />
17         <img src="http://yanyangtian.cnblogs.com/image/6.gif" />
18         <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
19         <img src="http://yanyangtian.cnblogs.com/image/8.gif" />
20         <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
21         <img src="http://yanyangtian.cnblogs.com/image/8.gif" />
22     </div>
23 </body>
24 </html>
25

　　在此之前,首先來普及一下頁面加載的小知識:

當頁面的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 "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>小洋,燕洋天</title>

    <script type="text/javascript" src="../demo.js">
    </script>

</head>
<body>
    <div>
        <img src="http://demo1.com/images/1.gif" />
        <img src="http://demo1.com/images/2.gif" />
        <img src="http://demo2.com/image/3.gif" />
        <img src="http://demo2.com/image/4.gif" />
        <img src="http://demo3.com/image/5.gif" />
        <img src="http://demo3/image/6.gif" />
        <img src="http://demo4.com/image/7.gif" />
        <img src="http://demo4.com/image/8.gif" />
        <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
        <img src="http://yanyangtian.cnblogs.com/image/8.gif" />
    </div>
</body>
</html>

　　我們再來看看頁面的加載時間圖

　　這就是所謂的”并行”載入了.

　　比較一下兩段代碼的不同:其實就在img的src屬性上面:

　　　　第一段頁面的代碼:img的src屬性都是指向一個域名的.

　　　　第二段頁面的代碼:img的src屬性指向了不同的域名

　　這樣做的結果是什么?

　　請大家注意比較img的src的不同.

　　解釋之前,首先來看一個小的常識(在上篇文章中也提過):

當頁面請求向服務器請求資源的時候,如果瀏覽器已經在客戶端和服務器之前打開了一個tcp連接,而且請求的資源也在開了連接的服務器上,那么以后資源的請求就會充分的利用這個連接去獲取資源. 這樣也就是第一個時間圖的由來.

如果請求的圖片分別位于不同的服務器網站,或者那個請求的服務器網站有多個域名,那么因為瀏覽器就會為每一個域名去開一個tcp連接,發送http請求,這樣,結果就是同時開了多tcp連接,這也是第二個時間圖的由來.

　　雖然說并行加載,確實使得頁面的載入快了不少,但是也不是每一個圖片或者其他的資源都去搞一個不同的域名,像之前的第二個并行載入圖片的例子,也是讓兩個圖片利用一個tcp連接.如果每個圖片都去開一個連接,這樣瀏覽器就開了很多個連接,也是很費資源的,而且瀏覽器還可能會”僵死”.而且有時還會嚴重的影響性能.

　　所以,這是需要權衡的.

　　除了上面的優化方式,還有其他的圖片優化的加載方式.主要是通過減少http的請求達到優化

　　大家都知道網站的一個menu菜單,有些菜單就是用圖片作出來的.如