阿里2013校園招聘20題(瀏覽器請求過程)

What really happens when you navigate to a URL

當你在瀏覽器輸入一個網址,好比http://www.taobao.com,按回車以後發生了什麼?請從技術的角度描述,如瀏覽器、網絡(UDP、TCP、HTTP等),以及服務器等各類參數與對象上由此引起的一系列活動,請儘量涉及到全部的關鍵技術點。 php

1、瀏覽器查找域名的IP地址 css


image

導航的第一步是經過訪問的域名找出其IP地址。DNS查找過程以下:


一、瀏覽器緩存:瀏覽器會緩存DNS記錄一段時間。每一個瀏覽器存儲各自固定的一個時間 html

二、系統緩存:若是再瀏覽器緩存裏沒有找到須要的記錄,瀏覽器會作一個系統調用(windows裏是gethostbyname),這樣即可得到系統緩存記錄。 web

三、ISP DNS緩存:在這通常能找到相應緩存記錄 ajax

四、遞歸搜索:你的ISP的DNS服務器從根域名開始進行遞歸搜索,從.com頂級域名服務器到taobao的域名服務器。通常DNS服務器的緩存中會有.com域名服務器中的域名 算法

500px-An_example_of_theoretical_DNS_recursion_svg

DNS有一點使人擔心,這就是像wikipedia.org 或者 facebook.com這樣的整個域名看上去只是對應一個單獨的IP地址。還好,有幾種方法能夠消除這個瓶頸: 數據庫

  1. 循環 DNS 是DNS查找時返回多個IP時的解決方案。舉例來講,Facebook.com實際上就對應了四個IP地址。
  2. 負載平衡器 是以一個特定IP地址進行偵聽並將網絡請求轉發到集羣服務器上的硬件設備。 一些大型的站點通常都會使用這種昂貴的高性能負載平衡器。
  3. 地理 DNS 根據用戶所處的地理位置,經過把域名映射到多個不一樣的IP地址提升可擴展性。這樣不一樣的服務器不可以更新同步狀態,但映射靜態內容的話很是好。
  4. Anycast 是一個IP地址映射多個物理主機的路由技術。 美中不足,Anycast與TCP協議適應的不是很好,因此不多應用在那些方案中。

大多數DNS服務器使用Anycast來得到高效低延遲的DNS查找。 apache

2、瀏覽器給web服務器發送一個HTTP請求


image

由於像taobao主頁這樣的動態頁面,打開後在瀏覽器緩存中很快甚至立刻就會過時,毫無疑問他們不能從中讀取。 windows

因此,瀏覽器會把如下請求發送到taobao所在的服務器: 瀏覽器

GET http://taobao.com/   HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
GET這個請求定義了要讀取的URL,瀏覽器自定義(User-Agent頭)和它但願接受什麼類型的相應(Accept and Accept-Encoding頭)Connection頭要求服務器爲了後邊的請求不要關閉TCP鏈接。

請求中也包含瀏覽器存儲的該域名的cookies,在不一樣頁面請求當中,cookie是與跟蹤一個網站狀態相匹配的鍵值。這樣cookies會存儲登陸用戶名,服務器分配的密碼和一些用戶設置等。Cookies會以文本文檔形式存儲在客戶機裏,每次請求時發送給服務器。

3、facebook服務的永久重定向響應

image

圖中所示爲taobao服務器發回給瀏覽器的響應:

HTTP/1.1 301 Moved Permanently
 Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
 pre-check=0
 Expires: Sat, 01 Jan 2000 00:00:00 GMT
 Location: http://www.facebook.com/
 P3P: CP="DSP LAW"
 Pragma: no-cache
 Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
 path=/; domain=.facebook.com; httponly
 Content-Type: text/html; charset=utf-8
 X-Cnection: close
 Date: Fri, 12 Feb 2010 05:09:51 GMT
 Content-Length: 0
服務器給瀏覽器響應一個301永久重定向響應,這樣瀏覽器就會訪問「http://www.facebook.com/」 而非「http://facebook.com/」。

爲何服務器必定要重定向而不是直接發回用戶想看的網頁內容?這個問題有好多有意思的答案。

其中一個緣由跟搜索引擎排名有 關。你看,若是一個頁面有兩個地址,就像http://www.igoro.com/ 和http://igoro.com/,搜索引擎會認爲它們是兩個網站,結果形成每個的搜索連接都減小從而下降排名。而搜索引擎知道301永久重定向是 什麼意思,這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。

還有一個是用不一樣的地址會形成緩存友好性變差。當一個頁面有好幾個名字時,它可能會在緩存裏出現好幾回。

4、瀏覽器跟蹤重定向地址

如今瀏覽器知道了http://www.facebook.com/ 纔是要訪問的正確地址,因此他會發送另外一個獲取請求:

GET http://www.facebook.com/ HTTP/1.1
 Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
 Accept-Language: en-US
 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
 Accept-Encoding: gzip, deflate
 Connection: Keep-Alive
 Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
 Host: www.facebook.com
5、服務器「處理」請求

image

服務器接收到獲取請求,而後處理並返回一個相應。

一、web服務器軟件

web服務器軟件(像IIS和apache)接收HTTP請求,而後肯定執行什麼請求處理來處理它,請求處理就是一個可以讀懂請求而且能生成HTML來進行相應的程序(像ASP.NET,PHP,RUBY。。。)

舉一個簡單的例子,需求處理能夠以映射網站地址結構的文件層次存儲。像http://example.com/folder1/page1.aspx這個地 址會映射/httpdocs/folder1/page1.aspx這個文件。web服務器軟件能夠設置成爲地址人工的對應請求處理,這樣 page1.aspx的發佈地址就能夠是http://example.com/folder1/page1。

二、請求處理

請求處理閱讀請求及它的參數和cookies。它會讀取也可能更新一些數據,並將數據存儲在服務器上,而後需求處理會生成一個html相應。

全部動態網站都面臨一個有意思的難點-如何存儲數據,小網站通常都會有一個SQL數據庫來存儲數據,存儲大量數據和訪問量大的網站不得不找一些辦法把數據庫分配到多臺機器上。解決方案有:sharding(基於主鍵值將數據表分散到多個數據庫中),複製,利用弱語義一致性簡化數據庫。

委託給批處理是一個廉價保持數據更新的技術。

6、服務器發回一個HTML相應

image


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" id="facebook" class=" no_js">
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-language" content="en" />
 ...

關於壓縮,頭信息說明了是否緩存這個頁面,若是緩存的話如何去作,有什麼cookies要去設置(前面這個響應裏沒有這點)和隱私信息等等。

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

7、瀏覽器開始顯示HTML

瀏覽器沒有完整接受所有HTML文檔時,它就已經開始顯示整個頁面了:

image


8、瀏覽器發送獲取嵌入在HTML中的對象

image


在瀏覽器顯示HTML時,它會注意到須要獲取其餘地址內容的標籤。這時,瀏覽器會發送一個獲取請求來從新得到這些文件。

下面是幾個咱們訪問facebook.com時須要重獲取的幾個URL:

  1. 圖片
    http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
    http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
  2. CSS 式樣表
    http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
    http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
  3. 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一次的時候,響應的服務器可能就不同,這說明幕後的負載平衡開始起做用了。

9、瀏覽器發送異步請求(AJAX)

image


在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是一個請求-響應協議,因此聊天服務器不能把新消息發給客戶。取而代之的是客戶端不得不隔幾秒就輪詢下服務器端看本身有沒有新消息。

相關文章
相關標籤/搜索