從瀏覽器輸入網址到頁面呈現的過程(一)：先後端交互

這是一個很是很是很是常見的問題。我將這個過程分紅兩部分：一部分是瀏覽器發送請求到服務器返回數據；一部分是瀏覽器收到數據開始渲染返回的結果。

先上總體的一個框架：

DNS 解析

每個網址都有一個相對應的獨特的 IP 地址，這個 IP 地址對應着host這個域名的機器，其實域名是不重要的，重要的是這個 IP 地址，因爲 IP 地址這一串數字不便於記憶，所以此案有域名這個東西來幫助咱們記憶。

因此，咱們首先要對域名進行解析，找到網絡中真正處理這個網址的機器。

DNS 解析首先會從你的瀏覽器的緩存中去尋找是否有這個網址對應的 IP 地址，若是沒有就向OS系統的 DNS 緩存中尋找，若是沒有就是路由器的 DNS 緩存， 若是沒有就是 ISP 的DNS 緩存中尋找。

因此，緩存的尋找過程就是： 瀏覽器 -> 系統 -> 路由器 -> ISP。

若是在某一個緩存中找到的話，就直接跳到下一步。

若是都沒有找到的話，就會向 ISP 或者公共的域名解析服務發起 DNS 查找請求。這個查找的過程仍是一個遞歸查詢的過程。好比當咱們訪問segmentfault.com, 它的尋找過程是: 根域名服務器 -> .com域名服務器 -> segmentfault.com 域名服務器 返回相對應當的 IP 地址。

TCP 鏈接

經過 DNS 解析，咱們找到了真正處理這個網址的服務器的 IP 地址，這時候咱們要和它創建鏈接發送數據，TCP 是最經常使用的創建鏈接的協議。TCP 協議經過三次握手創建鏈接。

1️⃣：客戶端經過 SYN 報文段發送鏈接請求，肯定服務端是否開啓端口準備鏈接。狀態設置爲 SYN_SEND;
2️⃣：服務器若是有開着的端口而且決定接受鏈接，就會返回一個 SYN+ACK 報文段給客戶端，狀態設置爲 SYN_RECV；
3️⃣：客戶端收到服務器的 SYN+ACK 報文段，向服務器發送 ACK 報文段表示確認。此時客戶端和服務器都設置爲 ESTABLISHED 狀態。鏈接創建，能夠開始數據傳輸了。

發送請求

這個時候咱們的客戶端已經和處理這個網址的服務器創建了鏈接，咱們終於能夠請求咱們想要的數據了。

咱們一般的請求行是: 請求的方式 + 請求的資源的位置 + HTTP/[版本號]

好比： GET index.html HTTP/1.1

服務端迴應

服務器上有一個 Web 服務器，經常使用的有 Apache 等。它用來接受客戶端發來的請求，對 TCP 進行處理，解析 HTTP 協議，生成 HTTP Request 對象，而後將 HTTP Request 對象發送給請求處理器，也就是咱們經常使用的 PHP， Ruby 等這些後端程序，這些後端程序將根據 Request 對象生成相應的響應數據。

生成響應數據以後，這時候咱們就要把響應數據發送給客戶端了。

一般響應由： 響應行 + 響應頭部 + 響應主體 組成。

響應行：HTTP/[版本號] 狀態碼 狀態信息

好比： HTTP/1.1 200 OK

狀態碼分別有如下幾種：
1xx - 一些信息
2xx - 成功
3xx - 重定向
4xx - 客戶端錯誤
5xx - 服務端錯誤

響應頭主要是服務器想設置的一些信息，好比 cookie 等。
響應主體就是要返回的資源，好比 HTML 文件。

完成第一部分

到這裏咱們已經完成了第一部分，客戶端已經收到了請求的資源，假設這裏收到的是 HTML 文件，下一篇咱們就來看看瀏覽器怎麼渲染收到的 HTML 文件。

參考資料

Medium 整個流程

SegmentFault 整個流程

TCP 三次握手