從輸入網址到顯示網頁(2)

7. 服務器發回一個HTML響應

圖中為服務器生成并返回的響應：

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@[...]

整個響應大小為35kB，其中大部分在整理后以blob類型傳輸。

內容編碼頭告訴瀏覽器整個響應體用 gzip算法進行壓縮。解壓blob塊后，你可以看到如下期望的HTML：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
lang="en" id="facebook" class=" no_js">

…

關于壓縮，頭信息說明了是否緩存這個頁面，如果緩存的話如何去做，有什么cookies要去設置（前面這個響應里沒有這點）和隱私信息等等。

請注意報頭中把Content-type設置為“text/html”。報頭讓瀏覽器將該響應內容以HTML形式呈現，而不是以文件形式下載它。瀏覽器會根據報頭信息決定如何解釋該響應，不過同時也會考慮像URL擴展內容等其他因素。

8. 瀏覽器開始顯示HTML

在瀏覽器沒有完整接受全部HTML文檔時，它就已經開始顯示這個頁面了：

9. 瀏覽器發送獲取嵌入在HTML中的對象

在瀏覽器顯示HTML時，它會注意到需要獲取其他地址內容的標簽。這時，瀏覽器會發送一個獲取請求來重新獲得這些文件。

下面是幾個我們訪問facebook.com時需要重獲取的幾個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
…

這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發送請求，重定向等等…

但不像動態頁面那樣，靜態文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊，而從緩存中直接讀取。服務器的響應中包含了靜態文件保存的期限 信息，所以瀏覽器知道要把它們緩存多長時間。還有，每個響應都可能包含像版本號一樣工作的ETag頭（被請求變量的實體值），如果瀏覽器觀察到文件的版本 ETag信息已經存在，就馬上停止這個文件的傳輸。

試著猜猜看“fbcdn.net”在地址中代表什么？聰明的答案是”Facebook內容分發網絡”。Facebook利用內容分發網絡（CDN）分發像圖片，CSS表和 JavaScript文件這些靜態文件。所以，這些文件會在全球很多CDN的數據中心中留下備份。

靜態內容往往代表站點的帶寬大小，也能通過CDN輕松的復制。通常網站會使用第三方的CDN。例如，Facebook的靜態文件由最大的CDN提供商Akamai來托管。

舉例來講，當你試著ping static.ak.fbcdn.net的時候，可能會從某個akamai.net服務器上獲得響應。有意思的是，當你同樣再ping一次的時候，響應的服務器可能就不一樣，這說明幕后的負載平衡開始起作用了。

10. 瀏覽器發送異步（AJAX）請求

在Web 2.0偉大精神的指引下，頁面顯示完成后客戶端仍與服務器端保持著聯系。

以 Facebook聊天功能為例，它會持續與服務器保持聯系來及時更新你那些亮亮灰灰的好友狀態。為了更新這些頭像亮著的好友狀態，在瀏覽器中執行的 JavaScript代碼會給服務器發送異步請求。這個異步請求發送給特定的地址，它是一個按照程式構造的獲取或發送請求。還是在Facebook這個例 子中，客戶端發送給http://www.facebook.com/ajax/chat/buddy_list.php一個發布請求來獲取你好友里哪個 在線的狀態信息。

提起這個模式，就必須要講講”AJAX”? “異步JavaScript 和 XML”，雖然服務器為什么用XML格式來進行響應也沒有個一清二白的原因。再舉個例子吧，對于異步請求，Facebook會返回一些 JavaScript的代碼片段。

除了其他，fiddler這個工具能夠讓你看到瀏覽器發送的異步請求。事實上，你不僅可以被動的做為這些請求的看客，還能主動出擊修改和重新發送它們。AJAX請求這么容易被蒙，可著實讓那些計分的在線游戲開發者們郁悶的了。（當然，可別那樣騙人家~）

Facebook聊天功能提供了關于AJAX一個有意思的問題案例：把數據從服務器端推送到客戶端。因為HTTP是一個請求-響應協議，所以聊天服務器不能把新消息發給客戶。取而代之的是客戶端不得不隔幾秒就輪詢下服務器端看自己有沒有新消息。

這些情況發生時長輪詢是個減輕服務器負載挺有趣的技術。如果當被輪詢時服務器沒有新消息，它就不理這個客戶端。而當尚未超時的情況下收到了該客戶的新消息，服務器就會找到未完成的請求，把新消息做為響應返回給客戶端。

總結一下

希望看了本文，你能明白不同的網絡模塊是如何協同工作的

原文：http://igoro.com/archive/what-really-happens-when-you
譯文：http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html