一個網頁的漂洋過海之旅：起航

02-01

每天我都會在Chrome的地址欄中敲進許許多多的字元，然後按下回車。過不了多久，Chrome就帶我進入一個又一個的頁面——有資料，有新聞，有視頻——互聯網和網頁對於我們來說就像是自來水和電那樣自然而然。

然而這一切究竟是怎麼發生的？我為什麼要在瀏覽器里敲進一大堆字元？按下回車後發生了什麼？下面就簡單的介紹一下存放在大洋彼岸伺服器上的頁面文件是怎樣出現在我們面前的瀏覽器中。

URL

在瀏覽器地址欄中顯示的、類似於 https://zhuanlan.zhihu.com/hengg 這種格式的字元叫做URL（Uniform Resource Locator，統一資源定位符）。所有網路上的資源都可以通過URL來定位。

我的專欄主頁就是一個典型的URL。URL由如下幾部分構成：

https:// 聲明協議類型為https。類似的協議類型還有http,ftp等等，它們是為了通過網路進行數據交換而建立的規則、標準或約定的集合。
http://zhuanlan.zhihu.com 域名
443 邏輯埠，通過不同的邏輯埠來區分不同的服務。一個IP地址的埠通過16bit進行編號，最多可以有65536個埠。https默認的埠號就是443，因此此處:443也可以省略；http默認埠號則是80.
/hengg 代表http://zhuanlan.zhihu.com域名下的hengg路徑及相應的資源文件。

在互聯網上，只要有可用的URL，我們就能獲取到相應的資源文件。

w3-url-spec

DNS

在瀏覽器中輸入URL並按下回車後，首先需要通過DNS（Domain Name System，域名系統）找到對應伺服器的IP。DNS是互聯網上作為域名和IP地址相互映射的一個分散式資料庫，通過DNS我們能夠直接訪問域名而不是10.222.45.33這種不便記憶的IP地址，DNS會將域名解析為對應的IP地址。

一個域名可以對應多個IP，通過負載均衡技術返回最適合用戶的IP。

wikipedia-DNS

請求

獲取到IP埠號之後，瀏覽器就可以向伺服器發送請求了。一個完整的請求由請求行，請求體，請求內容組成。以知乎專欄為例，瀏覽器發送的請求行為：

請求網址：https://zhuanlan.zhihu.comn請求方法：GETn遠程地址：116.211.167.187:443n版本：HTTP/1.1n

其中常用請求方法有如下幾種：

GET 請求指定的頁面信息，並返回實體主體。常用方法
HEAD 類似於get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
POST 向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。常用方法
PUT 從客戶端向伺服器傳送的數據取代指定的文檔的內容。
DELETE 請求伺服器刪除指定的頁面。
PATCH 類似於PUT，但只更新瀏覽器所指定的數據

請求頭的關鍵參數如下：

Host: zhuanlan.zhihu.comnUser-Agent: 用戶操作系統及瀏覽器信息nAccept: 文件類型nA文件類型，應該是瀏覽器可接受的MIME類型nAccept-Language: 瀏覽器所希望的語言類型 nAccept-Encoding: 編碼方式nConnection: 是否需要持久鏈接nCookie: n

請求體：

在本例中沒有請求體。請求頭和請求體之間是一個空行，表示請求頭已經結束，接下來的是請求體。用戶登錄時請求體可能如下：

username=admin&password=1234n

響應

伺服器收到瀏覽器發送的請求後進行相應的處理，並返迴響應。響應由響應頭，響應行和響應體組成。本例中響應行如下：

協議 HTTP/1.1n狀態碼 200n

狀態碼伺服器的響應狀態，由三位整數組成，分為五種：

1xx：指示信息，表示請求已接收，繼續處理
2xx：成功，表示請求已經被成功接收，理解，接受
3xx：重定向，要完成請求必須進行更進一步的操作
4xx：客戶端錯誤，請求有語法錯誤或請求無法實現
5xx：伺服器端錯誤，伺服器未能實現合法的請求

本例中200代表請求已成功。

響應頭：

Content-Encoding: 響應體編碼nContent-Length: 響應體長度nContent-Type: 響應體類型nDate: Sun, 26 Feb 2017 02:39:32 GMTnLast-Modified: Fri, 24 Feb 2017 11:02:29 GMTnServer:伺服器n

響應體，即我們所請求的頁面文件：

<!doctype html>n<html> n ...n</html>n

渲染

瀏覽器得到了伺服器返回的響應體HTML文件，解析並渲染這個文件，最終展現在我們面前。

以上就是對瀏覽器如何獲取頁面並展示的簡單介紹。覺得不過癮？敬請期待吧！