高性能ASP.NET站點構(gòu)建之優(yōu)化HTTP請求
高性能ASP.NET站點構(gòu)建系列文章目錄
- 高性能ASP.NET站點構(gòu)建之開篇
- 高性能ASP.NET站點構(gòu)建之剖析頁面的處理過程
- 高性能ASP.NET站點構(gòu)建之優(yōu)化HTTP請求
- 高性能ASP.NET站點構(gòu)建之細(xì)節(jié)決定成敗
- 高性能ASP.NET站點構(gòu)建之性能調(diào)優(yōu)綜述
- 高性能ASP.NET站點構(gòu)建之識別性能瓶頸
- 高性能ASP.NET站點構(gòu)建之簡單的優(yōu)化措施
- ASP.NET站點構(gòu)建之減少不必要的請求
- 高性能ASP.NET站點構(gòu)建之托管資源優(yōu)化
- 高性能ASP.NET站點構(gòu)建之監(jiān)測CLR性能
上一篇文章主要講述了請求一個頁面的過程,同時也提出了在這個過程中的一些優(yōu)化點,本篇就開始細(xì)化頁面的請求過程并且提出優(yōu)化的方案.同時,在上篇文章中,不少朋友也提出了一些問題,在本篇中也對這些問題給出了回答!
本篇的議題如下:
HTTP請求的優(yōu)化
HTTP請求的優(yōu)化
在一個網(wǎng)頁的請求過程中,其實整個頁面的html結(jié)構(gòu)(就是頁面的那些html骨架)請求的時間是很短的,一般是占整個頁面的請求時間的10%-20%.在頁面加載的其余的時間實際上就是在加載頁面中的那些flash,圖片,腳本的資源. 一直到所有的資源載入之后,整個頁面才能完整的展現(xiàn)在我們面前.
下面,我們就從一個頁面開始講述:
- <!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="../images/1.gif" />
- <img src="../images/2.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/3.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/4.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/5.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/6.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
- <img src="http://yanyangtian.cnblogs.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>
如果我們向服務(wù)器請求這個頁面,客戶端的瀏覽器首先請求到的數(shù)據(jù)就是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="../images/1.gif" />
- <img src="../images/2.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/3.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/4.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/5.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/6.gif" />
- <img src="http://yanyangtian.cnblogs.com/image/7.gif" />
- <img src="http://yanyangtian.cnblogs.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>
在此之前,首先來普及一下頁面加載的小知識:
當(dāng)頁面的html骨架載入了之后,瀏覽器就開始解析頁面中標(biāo)簽,從上到下開始解析.
首先是head標(biāo)簽的解析,如果發(fā)現(xiàn)在head中有要引用的js腳本,那么瀏覽器此時就開始請求腳本,此時整個頁面的解析過程就停了下來,一直到j(luò)s請求完畢.
之后頁面接著向下解析,如解析body標(biāo)簽,如果在body中有img標(biāo)簽,那么瀏覽器就會請求img的src對應(yīng)的資源,如果有多個img標(biāo)簽,那么瀏覽器就一個個的解析,解析不會像js那樣等待的,如果發(fā)現(xiàn)img的url地址是同一個地址,那么瀏覽器就會充分的利用這個已經(jīng)打開的tcp連接順序的去一個個的請求圖片,如果發(fā)現(xiàn)有的img的url地址不同,那么瀏覽器就另開tcp連接,發(fā)送http請求.
注意之前請求js的區(qū)別:請求需要js,瀏覽器會一直等待,不在解析下面的html標(biāo)簽
但是解析到img的時候,盡管此時需要加載圖片,但是頁面的解析過程還是會繼續(xù)下去的,然后決定是否發(fā)送新的tcp連接加載資源.
大家可能覺得這個之前的代碼片段一樣,確實代碼是一樣的,但是,在最開始的時候,發(fā)送到瀏覽器中的只是那些html的代碼,任何的js腳本和圖片還沒有發(fā)送過來.
當(dāng)html代碼到了瀏覽器中,那么瀏覽器就開始一步步的解析這些代碼了,只要遇到了需要加載的資源,瀏覽器就向服務(wù)器發(fā)出http請求,請求所需的資源.
整個頁面的加載時間圖如下:
大家從圖中可以看出:
第一條線中分為一半黃色和一半藍(lán)色,其實黃色的部分就代表了打開一個tcp連接花的時間,而后面的藍(lán)色的部分就是請求整個html骨架文檔的時間.可以看出,請求html骨架的時間是很短的.其余藍(lán)色的線就表示了圖片,腳本資源加載所花的時間.
很顯然,這樣頁面的整個加載時間就很長了.因為頁面的加載幾乎是順序的載入,時間就是所有資源加載時間的總和.
下面我們把上面的頁面代碼代為如下:
- <!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屬性指向了不同的域名
這樣做的結(jié)果是什么?
請大家注意比較img的src的不同.
解釋之前,首先來看一個小的常識(在上篇文章中也提過):
當(dāng)頁面請求向服務(wù)器請求資源的時候,如果瀏覽器已經(jīng)在客戶端和服務(wù)器之前打開了一個tcp連接,而且請求的資源也在開了連接的服務(wù)器上,那么以后資源的請求就會充分的利用這個連接去獲取資源. 這樣也就是第一個時間圖的由來.
如果請求的圖片分別位于不同的服務(wù)器網(wǎng)站,或者那個請求的服務(wù)器網(wǎng)站有多個域名,那么因為瀏覽器就會為每一個域名去開一個tcp連接,發(fā)送http請求,這樣,結(jié)果就是同時開了多tcp連接,這也是第二個時間圖的由來.
雖然說并行加載,確實使得頁面的載入快了不少,但是也不是每一個圖片或者其他的資源都去搞一個不同的域名,像之前的第二個并行載入圖片的例子,也是讓兩個圖片利用一個tcp連接.如果每個圖片都去開一個連接,這樣瀏覽器就開了很多個連接,也是很費資源的,而且瀏覽器還可能會”僵死”.而且有時還會嚴(yán)重的影響性能.
所以,這是需要權(quán)衡的.
除了上面的優(yōu)化方式,還有其他的圖片優(yōu)化的加載方式.主要是通過減少http的請求達(dá)到優(yōu)化
大家都知道網(wǎng)站的一個menu菜單,有些菜單就是用圖片作出來的.如
如果上面的圖片一個個載入,勢必影響速度,如果開多和請求,有點得不償失.而且圖片也不是很大,那么就一次把整個menu需要的圖片作為整個圖片,一次加載,然后通過map的方式,控制點擊圖片的位置來達(dá)到導(dǎo)航的效果.
這樣一個問題就是:算出圖片的坐標(biāo),不能點擊了”主頁”圖片,然后卻跳到了”幫助”頁面了.
本篇就講述到這里,下篇講述其他的資源文件的優(yōu)化,希望 多多提出建議,爭取把這個系列寫好!
原文鏈接：http://www.cnblogs.com/yanyangtian/archive/2010/07/28/1786720.html
【編輯推薦】
