上一篇文章主要講述了請求一個頁面的過程,同時也提出了在這個過程中的一些優化點,本篇就開始細化頁面的請求過程并且提出優化的方案.同時,在上篇文章中,不少朋友也提出了一些問題,在本篇中也對這些問題給出了回答!
本篇的議題如下:
HTTP請求的優化
HTTP請求的優化
在一個網頁的請求過程中,其實整個頁面的html結構(就是頁面的那些html骨架)請求的時間是很短的,一般是占整個頁面的請求時間的10%-20%.在頁面加載的其余的時間實際上就是在加載頁面中的那些flash,圖片,腳本的資源. 一直到所有的資源載入之后,整個頁面才能完整的展現在我們面前.
下面,我們就從一個頁面開始講述:
<!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>? ?
如果我們向服務器請求這個頁面,客戶端的瀏覽器首先請求到的數據就是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>? ?
在此之前,首先來普及一下頁面加載的小知識:
當頁面的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菜單,有些菜單就是用圖片作出來的.如
如果上面的圖片一個個載入,勢必影響速度,如果開多和請求,有點得不償失.而且圖片也不是很大,那么就一次把整個menu需要的圖片作為整個圖片,一次加載,然后通過map的方式,控制點擊圖片的位置來達到導航的效果.
這樣一個問題就是:算出圖片的坐標,不能點擊了”主頁”圖片,然后卻跳到了”幫助”頁面了.
本篇就講述到這里,下篇講述其他的資源文件的優化,希望 多多提出建議,爭取把這個系列寫好!
總結
以上是生活随笔為你收集整理的构建高性能ASP.NET站点之二 优化HTTP请求(前端)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
