HTTP完整請求過程
一、引言
前端不僅要讓使用者對網頁有完美的體驗，讓使用者儘快體驗到完美的網頁也是很重要的，這就要前端攻城獅掌握一些網路原理相關的知識了。這裡就來聊一聊從使用者輸入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 查詢過程：
- 瀏覽器快取 —— 瀏覽器會快取DNS 記錄一段時間，但是作業系統並沒有告訴瀏覽器儲存DNS 記錄的時間。於是，不同瀏覽器會儲存各自的一個固定時間（ 2 分鐘到 30 分鐘不等） 。
- 系統快取 – 如果在瀏覽器快取裡沒有找到需要的記錄，瀏覽器會做一個系統呼叫（ Windows 裡是 gethostbyname ） ，這樣便可獲得並查詢系統快取中的記錄。
- 路由器快取 – 接著，前面的查詢請求發向路由器。路由器一般會有自己的DNS 快取。
- ISP DNS快取 – 接下來要check 的就是ISP 快取DNS 的伺服器。ISP (Internet Service Provider) 就是網際網路服務提供商，在這一般都能找到相應的快取記錄。
- 遞迴搜尋 – 你的ISP 的DNS 伺服器從跟域名伺服器開始進行遞迴搜尋，從.com 頂級域名伺服器到example 的域名伺服器。一般DNS 伺服器的快取中會有.com 域名伺服器中的域名，所以到頂級伺服器的匹配過程不是那麼必要了。
-
DNS 進行域名解析的過程：
- 客戶端發出DNS 請求翻譯IP 地址或主機名；
- DNS 伺服器在收到客戶端的請求後，檢查DNS 伺服器的快取，若查到請求的地址或名字，即向客戶端發出應答資訊；
- 若沒有查到，則在資料庫中查詢，若查到請求的地址或名字，即向客戶端發出應答資訊；
- 若沒有查到，則將請求發給根域DNS 伺服器，並依序從根域查詢頂級域，由頂級查詢二級域，二級域查詢三級，直至找到要解析的地址或名字。然後，向客戶端所在網路的DNS 伺服器發出應答資訊，DNS 伺服器收到應答後，先在快取中儲存，然後，將解析結果發給客戶端。
- 若沒有找到，則返回錯誤資訊。
2. http請求
-
三次握手建立 TCP 連線：
在http 工作開始之前，瀏覽器首先要通過網路與伺服器建立連線，該連線是通過TCP 來完成的。該協議與IP 協議共同構建Internet ，即著名的TCP/IP 協議族，因此Internet 又被稱作是TCP/IP 網路。 http 是比TCP 更高層次的應用層協議 。根據規則，只有低層協議建立之後才能進行更高次層協議的連線。因此，首先要建立TCP 連線，一般TCP 連線的埠號是80 。在TCP/IP 協議中，TCP 協議提供可靠的連線服務，採用三次握手建立一個連線：
- 第一次握手：建立連線時，客戶端傳送SYN 包（syn=j） 到伺服器，並進入SYN_SENT 狀態，等待伺服器確認；SYN：同步序列編號（Synchronize Sequence Numbers）
- 第二次握手：伺服器收到SYN 包，必須確認客戶的SYN（ack=j+1） ，同時自己也傳送一個SYN 包（syn=k） ，即SYN+ACK 包，此時伺服器進入SYN_RECV 狀態；
- 第三次握手：客戶端收到伺服器的SYN+ACK 包，向伺服器傳送確認包ACK(ack=k+1） ，此包傳送完畢，客戶端和伺服器進入ESTABLISHED（TCP連線成功） 狀態，完成三次握手。
完成三次握手，客戶端與伺服器開始傳送資料。
一旦建立了TCP 連線，瀏覽器就會向伺服器傳送http 請求命令。瀏覽器傳送其請求命令之後，還要以頭資訊的形式向伺服器傳送一些別的資訊。此後，瀏覽器傳送了一空白行來通知伺服器，它已經結束了該頭資訊的傳送。
-
四次揮手終止連線
由於TCP 連線是全雙工的，因此每個方向都必須單獨進行關閉。原則是當一方完成它的資料傳送任務後，就能傳送一個FIN 來終止這個方向的連線。收到一個FIN 只意味著這一方向上沒有資料流動。一個TCP 連線在收到一個FIN 後仍能傳送資料。首先進行關閉的一方將執行主動關閉，而另一方執行被動關閉。
- 第一次揮手：TCP 客戶端傳送一個FIN ，用來關閉客戶端到伺服器的資料傳送。
- 第二次揮手：伺服器收到這個FIN ，它發回一個ACK ，確認序號為收到的序號加1 。和SYN 一樣，一個FIN 將佔用一個序號。
- 第三次揮手：伺服器關閉客戶端的連線，傳送一個FIN 給客戶端。
- 第四次揮手：客戶端發回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 檔案後，會對已經渲染的頁面重新渲染，加入它們應有的樣式。圖片檔案載入完，立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排 。
三、結語
做前端不僅要掌握前端的知識，對一些前端相關的例如計算機網路、資料結構、計算機原理都要有一定的瞭解，因為網路世界連線在一起的，前端與這些知識都是有接觸的，說不準什麼時候就會用上。而且，學好這些知識，對前端優化也有很大的幫助。
Linux公社的RSS地址 ：ofollow,noindex" target="_blank">https://www.linuxidc.com/rssFeed.aspx
本文永久更新連結地址：https://www.linuxidc.com/Linux/2018-10/154586.htm