高性能WEB開發(fā)減少請(qǐng)求數(shù)的方法

這篇文章主要介紹“高性能WEB開發(fā)減少請(qǐng)求數(shù)的方法”，在日常操作中，相信很多人在高性能WEB開發(fā)減少請(qǐng)求數(shù)的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”高性能WEB開發(fā)減少請(qǐng)求數(shù)的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

我們先分析下請(qǐng)求頭，看看每次請(qǐng)求都帶了那些額外的數(shù)據(jù).下面是監(jiān)控的google的請(qǐng)求頭

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-h5hVw_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

這里發(fā)送的請(qǐng)求頭的大小大概420 bytes，返回的請(qǐng)求頭大概 600 bytes。

可見每次請(qǐng)求都會(huì)帶上一些額外的信息進(jìn)行傳輸(這次請(qǐng)求中還沒有帶cookie)，當(dāng)請(qǐng)求的資源很小，比如1個(gè)不到1k的圖標(biāo)，可能request帶的數(shù)據(jù)比實(shí)際圖標(biāo)的數(shù)據(jù)量還大。

所以當(dāng)請(qǐng)求越多的時(shí)候，在網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)自然就多，傳輸速度自然就慢了。

其實(shí)request自帶的數(shù)據(jù)量還是小問題，畢竟request能帶的數(shù)據(jù)量還是有限的。

http連接的開銷

相比request頭部多余的數(shù)據(jù)，http連接的開銷則更加嚴(yán)重。先看看從用戶輸入1個(gè)URL到下載內(nèi)容到客戶端需要經(jīng)過哪些階段：

1. 域名解析

2. 開啟TCP連接

3. 發(fā)送請(qǐng)求

4. 等待(主要包括網(wǎng)絡(luò)延遲和服務(wù)器處理時(shí)間)

5. 下載資源

可能很多人認(rèn)為每次請(qǐng)求大部分時(shí)間都花在下載資源上，讓我們看看blogjava資源下載瀑布圖(每種顏色代表的階段與上面5個(gè)階段對(duì)應(yīng))：

看了上圖你可能驚訝，花費(fèi)在等待階段的時(shí)間比實(shí)際下載的時(shí)間要多的多，上圖告訴我們：

1. 每次請(qǐng)求花費(fèi)的大部分時(shí)間在其他階段，而不是在下載資源階段

2. 再小的資源照樣會(huì)花費(fèi)很多時(shí)間在其他階段，只是下載階段會(huì)比較短(見上圖的第6個(gè)資源，才284Byte)。

正對(duì)上面提到的2種情況，我們應(yīng)該要怎么進(jìn)行優(yōu)化了?減少請(qǐng)求數(shù)來減少其他階段的花銷和網(wǎng)絡(luò)中傳輸?shù)臄?shù)據(jù)。

如何減少請(qǐng)求數(shù)

1、合并文件

合并文件就是把很多JS文件合并成1個(gè)文件，很多CSS文件合并成1個(gè)文件，這種方法應(yīng)該很多人用到過，這里不做詳細(xì)介紹，

只推薦1個(gè)合并的工具：yuiCompressor 這個(gè)工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/

2、合并圖片

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

3、把JS、CSS合并到1個(gè)文件

上面第1種方法說的只是把幾個(gè)JS文件合并成1個(gè)JS文件，幾個(gè)CSS文件合并成1個(gè)CSS文件，哪如何把CSS和JS都合并到1個(gè)文件中，見我的另1篇文章:

http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

4、使用Image maps

Image maps 是把多個(gè)圖片合并成1個(gè)圖片，然后使用html中的標(biāo)簽連接圖片，并實(shí)現(xiàn)點(diǎn)擊圖片不同的區(qū)域執(zhí)行不同的動(dòng)作，image map在導(dǎo)航條中比較容易使用到。

image map的使用方法見： http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5、data嵌入圖片

這種方法把圖片進(jìn)行編碼直接嵌入到html中進(jìn)行使用，以減少HTTP請(qǐng)求，但這個(gè)會(huì)增加HTML頁面的大小，而且這樣嵌入的圖片不能緩存。見下面這個(gè)圖片：

上面的圖片就是把圖片進(jìn)行base64編碼后使用data:嵌入到html中，代碼如下(后面的省略了，大家可以查看源代碼看)：

<IMG SRC="data:image/gif;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAWRXhpZgAASUkqAAgAA......">

其中g(shù)oogle的視頻搜索中，搜索出來的視頻縮略圖就都是使用嵌入的圖片的，見下圖：

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

所以微軟的bing搜索在用戶***次訪問的時(shí)候使用data嵌入圖片，然后后臺(tái)懶加載真真的圖片，以后訪問就直接使用緩存的圖片，而不使用data。

到此，關(guān)于“高性能WEB開發(fā)減少請(qǐng)求數(shù)的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！