7. 服務(wù)器發(fā)回一個(gè)HTML響應(yīng)

圖中為服務(wù)器生成并返回的響應(yīng):
HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP=”DSP LAW”
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 12 Feb 2010 09:05:55 GMT
2b3Tn@[…]
整個(gè)響應(yīng)大小為35kB,其中大部分在整理后以blob類型傳輸。
內(nèi)容編碼頭告訴瀏覽器整個(gè)響應(yīng)體用 gzip算法進(jìn)行壓縮。解壓blob塊后,你可以看到如下期望的HTML:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
lang=”en” id=”facebook” class=” no_js”>
…
關(guān)于壓縮,頭信息說明了是否緩存這個(gè)頁面,如果緩存的話如何去做,有什么cookies要去設(shè)置(前面這個(gè)響應(yīng)里沒有這點(diǎn))和隱私信息等等。
請(qǐng)注意報(bào)頭中把Content-type設(shè)置為“text/html”。報(bào)頭讓瀏覽器將該響應(yīng)內(nèi)容以HTML形式呈現(xiàn),而不是以文件形式下載它。瀏覽器會(huì)根據(jù)報(bào)頭信息決定如何解釋該響應(yīng),不過同時(shí)也會(huì)考慮像URL擴(kuò)展內(nèi)容等其他因素。
8. 瀏覽器開始顯示HTML

在瀏覽器沒有完整接受全部HTML文檔時(shí),它就已經(jīng)開始顯示這個(gè)頁面了:

9. 瀏覽器發(fā)送獲取嵌入在HTML中的對(duì)象

在瀏覽器顯示HTML時(shí),它會(huì)注意到需要獲取其他地址內(nèi)容的標(biāo)簽。這時(shí),瀏覽器會(huì)發(fā)送一個(gè)獲取請(qǐng)求來重新獲得這些文件。
下面是幾個(gè)我們?cè)L問facebook.com時(shí)需要重獲取的幾個(gè)URL:
* 圖片
//images.sj33.cn/uploads/allimg/201003/20100306010909882.gif
//images.sj33.cn/uploads/allimg/201003/20100306010910105.gif
…
* CSS 式樣表
http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
…
* JavaScript 文件
http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
…
這些地址都要經(jīng)歷一個(gè)和HTML讀取類似的過程。所以瀏覽器會(huì)在DNS中查找這些域名,發(fā)送請(qǐng)求,重定向等等…
但不像動(dòng)態(tài)頁面那樣,靜態(tài)文件會(huì)允許瀏覽器對(duì)其進(jìn)行緩存。有的文件可能會(huì)不需要與服務(wù)器通訊,而從緩存中直接讀取。服務(wù)器的響應(yīng)中包含了靜態(tài)文件保存的期限 信息,所以瀏覽器知道要把它們緩存多長時(shí)間。還有,每個(gè)響應(yīng)都可能包含像版本號(hào)一樣工作的ETag頭(被請(qǐng)求變量的實(shí)體值),如果瀏覽器觀察到文件的版本 ETag信息已經(jīng)存在,就馬上停止這個(gè)文件的傳輸。
試著猜猜看“fbcdn.net”在地址中代表什么?聰明的答案是”Facebook內(nèi)容分發(fā)網(wǎng)絡(luò)”。Facebook利用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)分發(fā)像圖片,CSS表和 JavaScript文件這些靜態(tài)文件。所以,這些文件會(huì)在全球很多CDN的數(shù)據(jù)中心中留下備份。
靜態(tài)內(nèi)容往往代表站點(diǎn)的帶寬大小,也能通過CDN輕松的復(fù)制。通常網(wǎng)站會(huì)使用第三方的CDN。例如,F(xiàn)acebook的靜態(tài)文件由最大的CDN提供商Akamai來托管。
舉例來講,當(dāng)你試著ping static.ak.fbcdn.net的時(shí)候,可能會(huì)從某個(gè)akamai.net服務(wù)器上獲得響應(yīng)。有意思的是,當(dāng)你同樣再ping一次的時(shí)候,響應(yīng)的服務(wù)器可能就不一樣,這說明幕后的負(fù)載平衡開始起作用了。
10. 瀏覽器發(fā)送異步(AJAX)請(qǐng)求

在Web 2.0偉大精神的指引下,頁面顯示完成后客戶端仍與服務(wù)器端保持著聯(lián)系。
以 Facebook聊天功能為例,它會(huì)持續(xù)與服務(wù)器保持聯(lián)系來及時(shí)更新你那些亮亮灰灰的好友狀態(tài)。為了更新這些頭像亮著的好友狀態(tài),在瀏覽器中執(zhí)行的 JavaScript代碼會(huì)給服務(wù)器發(fā)送異步請(qǐng)求。這個(gè)異步請(qǐng)求發(fā)送給特定的地址,它是一個(gè)按照程式構(gòu)造的獲取或發(fā)送請(qǐng)求。還是在Facebook這個(gè)例 子中,客戶端發(fā)送給http://www.facebook.com/ajax/chat/buddy_list.php一個(gè)發(fā)布請(qǐng)求來獲取你好友里哪個(gè) 在線的狀態(tài)信息。
提起這個(gè)模式,就必須要講講”AJAX”? “異步JavaScript 和 XML”,雖然服務(wù)器為什么用XML格式來進(jìn)行響應(yīng)也沒有個(gè)一清二白的原因。再舉個(gè)例子吧,對(duì)于異步請(qǐng)求,F(xiàn)acebook會(huì)返回一些 JavaScript的代碼片段。
除了其他,fiddler這個(gè)工具能夠讓你看到瀏覽器發(fā)送的異步請(qǐng)求。事實(shí)上,你不僅可以被動(dòng)的做為這些請(qǐng)求的看客,還能主動(dòng)出擊修改和重新發(fā)送它們。AJAX請(qǐng)求這么容易被蒙,可著實(shí)讓那些計(jì)分的在線游戲開發(fā)者們郁悶的了。(當(dāng)然,可別那樣騙人家~)
Facebook聊天功能提供了關(guān)于AJAX一個(gè)有意思的問題案例:把數(shù)據(jù)從服務(wù)器端推送到客戶端。因?yàn)镠TTP是一個(gè)請(qǐng)求-響應(yīng)協(xié)議,所以聊天服務(wù)器不能把新消息發(fā)給客戶。取而代之的是客戶端不得不隔幾秒就輪詢下服務(wù)器端看自己有沒有新消息。
這些情況發(fā)生時(shí)長輪詢是個(gè)減輕服務(wù)器負(fù)載挺有趣的技術(shù)。如果當(dāng)被輪詢時(shí)服務(wù)器沒有新消息,它就不理這個(gè)客戶端。而當(dāng)尚未超時(shí)的情況下收到了該客戶的新消息,服務(wù)器就會(huì)找到未完成的請(qǐng)求,把新消息做為響應(yīng)返回給客戶端。
總結(jié)一下
希望看了本文,你能明白不同的網(wǎng)絡(luò)模塊是如何協(xié)同工作的
原文:http://igoro.com/archive/what-really-happens-when-you
譯文:http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html
