從 網址 輸入到頁面展現發生了什麼?(What really happens when you navigate to a URL)

原文地址:點擊打開鏈接

當你從瀏覽器輸入www.baidu.com後臺發生了什麼

1.將URL輸入到瀏覽器中

  這是最點單的一個,例如:facebook.conm

2.瀏覽器根據域名查找IP地址

image
瀏覽的第一步就是爲訪問域名計算出IP地址。DNS查找過程如下:

  • Browser cache(瀏覽器緩存)—瀏覽器會緩存DNS記錄一段時間。有趣的是,操作系統並沒有告訴瀏覽器每一個DNS記錄緩存的存活時間,所以瀏覽器自己會緩存它們固定的一段時間(不同的瀏覽器存在差異,一般是2-30分鐘)。
  • OS cache(操作系統緩存)—如果瀏覽器緩存中沒有找到對應的記錄,瀏覽器就會做一次系統請求(Windows系統中就是根據名稱從host文件中獲得IP地址)。操作系統有它自己的緩存。
  • Router cache(路由緩存)—請求會在你的路由器上繼續進行,路由一般都會有自己的DNS緩存。
  • ISP DNS cache(ISP DNS緩存)—下一個地方就是查找ISP's DNS服務器了,當然,它也會有一份緩存。
  • Recursive search(遞歸查找)—你的ISP's DNS服務從根域名開始循環查找,根據.com查找頂級域名服務器,然後再到 Facebook 的域名服務器。通常來說,DNS服務器都會有.com域名服務器的緩存,所以根域名服務器不是必須的。

下面是一個DNS循環查找的圖表: image

3.The browser sends a HTTP request to the web server

image
你可以確定 Facebook 的頁面不是從瀏覽器緩存中取到的,因爲動態頁面會很快就過期失效的(把過期時間設置在過去)。
所以,瀏覽器將會向 Facebook 的服務器發送一個請求:

GET http://facebook.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 關鍵字表示請求獲取: http://facebook.com/。瀏覽器的自我標識(User-Agent),和請求接受什麼類型的響應。(Accept和Accept-Encoding)。Connection關鍵字請求服務器保持TCP鏈接。
請求也會包含這個域名下的cookies。

4.Facebook 服務器通過重定向進行響應

image
這是 Facebook 返回瀏覽器請求的響應:

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 Moved Permanently告訴瀏覽器訪問 http://www.facebook.com/來代替http://facebook.com/.

5.瀏覽器重定向

image 瀏覽器現在知道http://www.facebook.com/是正確的URL地址,然後向這個地址發送了另一個GET請求:

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

請求頭和上面的基本相同。

6.服務器處理請求

image 服務器將會接收GET請求,然後處理它,並且對它做出響應。
這看起來是個簡單的任務,實際上這裏會發生許多有趣的事情,即使是訪問像我博客這樣簡單的網站,更不用說像 Facebook 這樣的大型網站了。

  • web服務軟件
    web服務軟件(例如:IIS 或者 Apache)接收HTTP請求,並且決定採用哪種方法來處理這個請求。一個請求處理是一個進程(在ASP.NET, PHP, Ruby,...),包括讀取請求和形成HTML響應。
  • 請求處理
    請求處理讀取請求的參數和cookies。它可能會讀取或者更新服務器上存儲的數據。然後請求處理將會生成一個HTML響應。

7.服務器返回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

2b3
��������T�n�@����[...]

整個響應是36KB。
Content-Encoding關鍵字告訴了瀏覽器響應主體內容是通過 gzip 方式進行壓縮的。通過解壓後,就可以看到你期盼已久的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如何設置,隱私數據如何處理等等信息。

8.瀏覽器開始渲染HTML

在瀏覽器接收整個 HTML 文檔之前,網站已經開始渲染了。

9.瀏覽器爲嵌入的對象發送請求 (例如:圖片等)

image
瀏覽器渲染HTML時,會注意的哪些需要發起請求的標準。然後發送GET請求爲它們獲取文件。
下面是我訪問 Facebook ,

每個請求都會和請求HTML頁面一樣,走相似的流程。所以,瀏覽器會在DNS中查找域名,發送請求URL,重定向等等。
當然,靜態文件是可以讓瀏覽器緩存的。一些文件可以直接從緩存中獲得,不用連接服務器。瀏覽器知道這些特有文件緩存多長時間,因爲響應頭的Expires關鍵字設置了這個文件的有效期。除此之外,每一個響應可能也會保留一個ETag頭,它就像版本號一樣。如果瀏覽器發現這個文件的ETag號已經存在了,它可以立即停止請求。

10.瀏覽器發送AJAX請求

image 在 web2.0 的時代,客戶端可以在頁面渲染完成之後繼續和服務器進行交互。

例如,當你的好友登錄或登出時,Facebook聊天會持續更新你的在線好友列表。爲了更新你的在線好友列表, JavaScript 已經向服務器發送了 AJAX 請求了。

DNS緩存機制

關於DNS緩存的機制,有一篇非常詳細的文章What really happens when you navigate to a URL

簡單來說,一條域名的DNS記錄會在本地有兩種緩存:瀏覽器緩存和操作系統(OS)緩存。在瀏覽器中訪問的時候,會優先訪問瀏覽器緩存,

如果未命中則訪問OS緩存,最後再訪問DNS服務器(一般是ISP提供),然後DNS服務器會遞歸式的查找域名記錄,然後返回。

DNS記錄會有一個ttl值(time to live),單位是秒,意思是這個記錄最大有效期是多少。經過實驗,OS緩存會參考ttl值,但是不完全等於ttl值,

而瀏覽器DNS緩存的時間跟ttl值無關,每種瀏覽器都使用一個固定值。

這裏有一篇文章,做過詳細的測試Why Web Browser DNS Caching Can Be A Bad Thing

 

Windows訪問DNS後會把記錄保存一段短暫的時間,

可通過ipconfig /displaydns 查看windows的DNS緩存、通過ipconfig /flushdns來清除。

 





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章