HTTP完整請求過程

2020-06-16 16:44:20

一、引言

前端不僅要讓使用者對網頁有完美的體驗，讓使用者盡快體驗到完美的網頁也是很重要的，這就要前端攻城獅掌握一些網路原理相關的知識了。這裡就來聊一聊從使用者輸入 url 到頁面載入完成的過程中都發生了什麼事情？

二、正文

使用者輸入 url 之後大致發生了以下幾件事：

瀏覽器查詢域名的 IP 地址。這一步包括 DNS 具體的查詢過程，包括：瀏覽器快取 -> 系統快取 -> 路由器快取……
瀏覽器向 web 伺服器傳送一個 http 請求：三次握手、傳送資料、四次揮手;
伺服器的永久重定向響應：返回真正存取的地址;
瀏覽器跟蹤重定向地址：另發一個 http 請求;
伺服器處理請求;
伺服器返回一個 http 響應;
瀏覽器顯示 html 頁面：解析 html 以構建 DOM 樹 –> 構建渲染樹 –> 布局渲染樹 –> 繪製渲染樹;
瀏覽器傳送請求，獲取嵌入在 html 中的資源（如圖片、音訊、視訊、CSS 、JS 等等）;
瀏覽器傳送非同步請求。

順便附上 http 狀態碼 (其他狀態碼的詳情，請戳這裡)：

http 狀態碼	詳細狀態碼	狀態原因
1xx		訊息
2xx		成功
3xx		重定向
4xx		用戶端錯誤
5xx		伺服器錯誤
5xx	500	介面報錯了
5xx	502	後端服務沒啟
5xx	503	啟動掛了

下面我們就詳細地了解一下這些過程：

1. DNS 查詢 IP 地址

DNS 是域名系統 (Domain Name System) 的縮寫，是因特網的一項核心服務。它作為可以將域名和 IP 地址相互對映的一個分散式資料庫，能夠使人更方便的存取網際網路，而不用去記住能夠被機器直接讀取的 IP 數位串。

DNS 查詢過程：
1. 瀏覽器快取 —— 瀏覽器會快取 DNS 記錄一段時間，但是作業系統並沒有告訴瀏覽器儲存 DNS 記錄的時間。於是，不同瀏覽器會儲存各自的一個固定時間（ 2 分鐘到 30 分鐘不等）。
2. 系統快取 – 如果在瀏覽器快取裡沒有找到需要的記錄，瀏覽器會做一個系統呼叫（ Windows 裡是 gethostbyname ），這樣便可獲得並查詢系統快取中的記錄。
3. 路由器快取 – 接著，前面的查詢請求發向路由器。路由器一般會有自己的 DNS 快取。
4. ISP DNS快取 – 接下來要 check 的就是 ISP 快取 DNS 的伺服器。ISP (Internet Service Provider) 就是網際網路服務提供者，在這一般都能找到相應的快取記錄。
5. 遞回搜尋 – 你的 ISP 的 DNS 伺服器從跟域名伺服器開始進行遞回搜尋，從 .com 頂級域名伺服器到 example 的域名伺服器。一般 DNS 伺服器的快取中會有 .com 域名伺服器中的域名，所以到頂級伺服器的匹配過程不是那麼必要了。
DNS 進行域名解析的過程：
1. 用戶端發出 DNS 請求翻譯 IP 地址或主機名；
2. DNS 伺服器在收到用戶端的請求後，檢查 DNS 伺服器的快取，若查到請求的地址或名字，即向用戶端發出應答資訊；
3. 若沒有查到，則在資料庫中查詢，若查到請求的地址或名字，即向用戶端發出應答資訊；
4. 若沒有查到，則將請求發給根域 DNS 伺服器，並依序從根域查詢頂級域，由頂級查詢二級域，二級域查詢三級，直至找到要解析的地址或名字。然後，向用戶端所在網路的 DNS 伺服器發出應答資訊，DNS 伺服器收到應答後，先在快取中儲存，然後，將解析結果發給用戶端。
5. 若沒有找到，則返回錯誤資訊。

2. http請求

三次握手建立 TCP 連線：

在 http 工作開始之前，瀏覽器首先要通過網路與伺服器建立連線，該連線是通過 TCP 來完成的。該協定與 IP 協定共同構建 Internet ，即著名的 TCP/IP 協定族，因此 Internet 又被稱作是 TCP/IP 網路。 http 是比 TCP 更高層次的應用層協定。根據規則，只有低層協定建立之後才能進行更高次層協定的連線。因此，首先要建立 TCP 連線，一般 TCP 連線的埠號是 80 。在 TCP/IP 協定中，TCP 協定提供可靠的連線服務，採用三次握手建立一個連線：
1. 第一次握手：建立連線時，用戶端傳送 SYN 包（syn=j）到伺服器，並進入 SYN_SENT 狀態，等待伺服器確認；SYN：同步序列編號（Synchronize Sequence Numbers）
2. 第二次握手：伺服器收到 SYN 包，必須確認客戶的 SYN（ack=j+1），同時自己也傳送一個 SYN 包（syn=k），即 SYN+ACK 包，此時伺服器進入 SYN_RECV 狀態；
3. 第三次握手：用戶端收到伺服器的 SYN+ACK 包，向伺服器傳送確認包 ACK(ack=k+1），此包傳送完畢，用戶端和伺服器進入 ESTABLISHED（TCP連線成功）狀態，完成三次握手。
完成三次握手，用戶端與伺服器開始傳送資料。

一旦建立了 TCP 連線，瀏覽器就會向伺服器傳送 http 請求命令。瀏覽器傳送其請求命令之後，還要以頭資訊的形式向伺服器傳送一些別的資訊。此後，瀏覽器傳送了一空白行來通知伺服器，它已經結束了該頭資訊的傳送。
四次揮手終止連線

由於 TCP 連線是全雙工的，因此每個方向都必須單獨進行關閉。原則是當一方完成它的資料傳送任務後，就能傳送一個 FIN 來終止這個方向的連線。收到一個 FIN 只意味著這一方向上沒有資料流動。一個 TCP 連線在收到一個 FIN 後仍能傳送資料。首先進行關閉的一方將執行主動關閉，而另一方執行被動關閉。
1. 第一次揮手：TCP 用戶端傳送一個 FIN，用來關閉用戶端到伺服器的資料傳送。
2. 第二次揮手：伺服器收到這個 FIN，它發回一個 ACK，確認序號為收到的序號加 1 。和 SYN 一樣，一個 FIN 將佔用一個序號。
3. 第三次揮手：伺服器關閉用戶端的連線，傳送一個 FIN 給用戶端。
4. 第四次揮手：用戶端發回 ACK 報文確認，並將確認序號設定為收到序號加 1 。

3. 伺服器的永久重定向響應

伺服器給瀏覽器響應一個 301 永久重定向響應，這樣瀏覽器就會存取 http://www.facebook.com/ 而非 http://facebook.com/ 。

為什麼伺服器一定要重定向而不是直接發會使用者想看的網頁內容呢？這個問題有好多有意思的答案。

其中一個原因跟搜尋引擎排名有關。你看，如果一個頁面有兩個地址，就像 http://www.igoro.com/ 和 http://igoro.com/ ，搜尋引擎會認為它們是兩個網站，結果造成每一個的搜尋連結都減少從而降低排名。而搜尋引擎知道 301 永久重定向是什麼意思，這樣就會把存取帶 www 的和不帶 www 的地址歸到同一個網站排名下。

還有一個原因是用不同的地址會造成快取友好性變差。當一個頁面有好幾個名字時，它可能會在快取裡出現好幾次。

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

現在，瀏覽器知道了 http://www.facebook.com/ 才是要存取的正確地址，所以它會傳送另一個獲取請求。

5. 伺服器“處理”請求

伺服器接收到獲取請求，然後處理並返回一個響應。

6. 頁面渲染

現代瀏覽器渲染頁面的過程是這樣的：解析 html 以構建 DOM 樹 –> 構建渲染樹 –> 布局渲染樹 –> 繪製渲染樹。

DOM 樹是由 html 檔案中的標籤排列組成。

渲染樹是在 DOM 樹中加入 css 或 html 中的 style 樣式而形成。渲染樹只包含需要顯示在頁面中的 DOM 元素，像 <head> 元素或 display 屬性值為 none 的元素都不在渲染樹中。在瀏覽器還沒接收到完整的 html 檔案時，它就開始渲染頁面了。

在遇到外部鏈入的指令碼標籤、樣式標籤、圖片時，會再次傳送 http 請求重複上述的步驟。在收到 css 檔案後，會對已經渲染的頁面重新渲染，加入它們應有的樣式。圖片檔案載入完，立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。

三、結語

做前端不僅要掌握前端的知識，對一些前端相關的例如計算機網路、資料結構、計算機原理都要有一定的了解，因為網路世界連線在一起的，前端與這些知識都是有接觸的，說不準什麼時候就會用上。而且，學好這些知識，對前端優化也有很大的幫助。