欧美日韩在线视频一区,亚洲欧美日韩在线不卡,欧美一区欧美二区

主頁 > 知識庫 > 高性能WEB開發為什么要減少請求數，如何減少請求數!

高性能WEB開發為什么要減少請求數，如何減少請求數!

http請求頭的數據量

我們先分析下請求頭，看看每次請求都帶了那些額外的數據.下面是監控的google的請求頭

Host www.google.com.hk
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTBDFff GTB7.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,en-us;q=0.7,en;q=0.3
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Proxy-Connection keep-alive

返回的response head

Date Sat, 17 Apr 2010 08:18:18 GMT
Expires -1
Cache-Control private, max-age=0
Content-Type text/html; charset=UTF-8
Set-Cookie PREF=ID=b94a24e8e90a0f50:NW=1:TM=1271492298:LM=1271492298:S=JH7CxsIx48Zoo8Nn; expires=Mon, 16-Apr-2012 08:18:18 GMT; path=/; domain=.google.com.hk NID=33=EJVyLQBv2CSgpXQTq8DLIT2JQ4aCAE9YKkU2x-h4hVw_ATrGx7njA69UUBMbzVHVnkAOe_jlGGzOoXhQACSFDP1i53C8hWjRTJd0vYtRNWhGYGv491mwbngkT6LCYbvg; expires=Sun, 17-Oct-2010 08:18:18 GMT; path=/; domain=.google.com.hk; HttpOnly
Content-Encoding gzip
Server gws

Content-Length 4344

這里發送的請求頭的大小大概420 bytes，返回的請求頭大概 600 bytes。

可見每次請求都會帶上一些額外的信息進行傳輸(這次請求中還沒有帶cookie)，當請求的資源很小，比如1個不到1k的圖標，可能request帶的數據比實際圖標的數據量還大。

所以當請求越多的時候，在網絡上傳輸的數據自然就多，傳輸速度自然就慢了。

其實request自帶的數據量還是小問題，畢竟request能帶的數據量還是有限的。

http連接的開銷

相比request頭部多余的數據，http連接的開銷則更加嚴重。先看看從用戶輸入1個URL到下載內容到客戶端需要經過哪些階段：

1. 域名解析
2. 開啟TCP連接
3. 發送請求
4. 等待(主要包括網絡延遲和服務器處理時間)
5. 下載資源

可能很多人認為每次請求大部分時間都花在下載資源上，讓我們看看blogjava資源下載瀑布圖(每種顏色代表的階段與上面5個階段對應)：

看了上圖你可能驚訝，花費在等待階段的時間比實際下載的時間要多的多，上圖告訴我們：
1. 每次請求花費的大部分時間在其他階段，而不是在下載資源階段
2. 再小的資源照樣會花費很多時間在其他階段，只是下載階段會比較短(見上圖的第6個資源，才284Byte)。

正對上面提到的2種情況，我們應該要怎么進行優化了？減少請求數來減少其他階段的花銷和網絡中傳輸的數據。

如何減少請求數

1、合并文件
合并文件就是把很多JS文件合并成1個文件，很多CSS文件合并成1個文件，這種方法應該很多人用到過，這里不做詳細介紹，
只推薦1個合并的工具：yuiCompressor 這個工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/

2、合并圖片
這是利用css sprite，通過控制背景圖片的位置來顯示不同的圖片。這種技術也是大家都用過的，不做詳細介紹，推薦1個在線合并圖片的網站:http://csssprites.com/

3、把JS、CSS合并到1個文件
上面第1種方法說的只是把幾個JS文件合并成1個JS文件，幾個CSS文件合并成1個CSS文件，哪如何把CSS和JS都合并到1個文件中，見我的另1篇文章:
http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

4、使用Image maps
Image maps 是把多個圖片合并成1個圖片，然后使用html中的map>標簽連接圖片，并實現點擊圖片不同的區域執行不同的動作，image map在導航條中比較容易使用到。
image map的使用方法見： http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5、data嵌入圖片
這種方法把圖片進行編碼直接嵌入到html中進行使用，以減少HTTP請求，但這個會增加HTML頁面的大小，而且這樣嵌入的圖片不能緩存。見下面這個圖片：

上面的圖片就是把圖片進行base64編碼后使用data:嵌入到html中，代碼如下(后面的省略了，大家可以查看源代碼看)：
IMG SRC="data:image/gif;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAWRXhpZgAASUkqAAgAA......">

其中google的視頻搜索中，搜索出來的視頻縮略圖就都是使用嵌入的圖片的，見下圖：

以上幾種方法在都有利有弊，在不同情況下可以選擇不同的使用方式，比如使用data嵌入圖片雖然減少了請求數，但會增加頁面大小。

所以微軟的bing搜索在用戶第一次訪問的時候使用data嵌入圖片，然后后臺懶加載真真的圖片，以后訪問就直接使用緩存的圖片，而不使用data。

[聲明] 轉載請注明出處:http://www.blogjava.net/BearRui/。禁止商用!

您可能感興趣的文章:

WEB高性能開發之瘋狂的HTML壓縮
web高性能開發系列隨筆 BearRui(AK-47)版
高性能WEB開發 flush讓頁面分塊,逐步呈現 flush讓頁面分塊,逐步呈現
高性能WEB開發頁面呈現、重繪、回流。
高性能WEB開發 JS、CSS的合并、壓縮、緩存管理
高性能WEB開發(5) 減少請求，響應的數據量
高性能web開發如何加載JS，JS應該放在什么位置？
高性能WEB開發圖片壓縮篇
高性能WEB開發 web性能測試工具推薦
高性能WEB開發 nginx HTTP服務器篇
編寫高性能的JavaScript 腳本的加載與執行
了解CSS的查找匹配原理，讓CSS更簡潔、高效

標簽：山南 96 防城港內蒙古日照巴彥淖爾定州宜賓

巨人網絡通訊聲明：本文標題《高性能WEB開發為什么要減少請求數，如何減少請求數!》，本文關鍵詞高性能,WEB,開發,為什么,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

欧美阿v视频在线大全_亚洲欧美中文日韩V在线观看_www性欧美日韩欧美91_亚洲欧美日韩久久精品

高性能WEB開發 為什么要減少請求數，如何減少請求數!

高性能WEB開發為什么要減少請求數，如何減少請求數!