總體流程圖如下：

1. URL 解析

瀏覽器首先對(duì) URL 解析，解析出協(xié)議、域名、端口、資源路徑、參數(shù)等。

2. DNS 域名解析

一般而言，域名比 IP 地址更好記，因而我們更習(xí)慣在瀏覽器輸入域名而不是 IP，而計(jì)算機(jī)網(wǎng)絡(luò)通信所識(shí)別的計(jì)算機(jī)標(biāo)識(shí)是 IP 地址，因而首先需要將一個(gè)域名轉(zhuǎn)化為相應(yīng)的 IP 地址，這就是 DNS 協(xié)議所要做的事。

DNS 就像我們手機(jī)中的通訊錄一樣，通訊錄中備注的是對(duì)方的姓名（類(lèi)似于域名），但是打電話(huà)的時(shí)候?qū)嶋H需要的是電話(huà)號(hào)碼（類(lèi)似于 IP 地址），利用通訊錄將一個(gè)姓名轉(zhuǎn)化為對(duì)應(yīng)的電話(huà)號(hào)碼。

3. 建立 TCP 連接

一般在瀏覽器輸入 URL，應(yīng)用層的協(xié)議為 HTTP/HTTPS，其需要的是可靠的服務(wù)，所使用的傳輸層協(xié)議為 TCP。

通過(guò)域名解析后，瀏覽器獲得了服務(wù)器的 IP，則向服務(wù)器發(fā)起 TCP 連接，這時(shí)候就會(huì)發(fā)生三次握手行為。

4. 發(fā)送 HTTP 請(qǐng)求

當(dāng)瀏覽器與服務(wù)器建立連接后，就可以進(jìn)行數(shù)據(jù)通信過(guò)程，瀏覽器會(huì)給服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求報(bào)文，請(qǐng)求報(bào)文包括請(qǐng)求行、請(qǐng)求頭、請(qǐng)求空行和請(qǐng)求體。在請(qǐng)求行中會(huì)指定方法、資源路徑以及 HTTP 版本，其中資源路徑是指定所要操作資源在服務(wù)器中的位置，而方法是指定要對(duì)這個(gè)資源做什么樣的操作。

從瀏覽器輸入 URL，資源路徑在第一步就已經(jīng)被解析出來(lái)了，而方法為 GET，表明要獲取資源，相當(dāng)于增刪改查中的查詢(xún)。

5. 服務(wù)器對(duì)請(qǐng)求進(jìn)行處理并做出響應(yīng)

當(dāng)收到瀏覽器發(fā)送的請(qǐng)求報(bào)文后，服務(wù)器會(huì)對(duì)此請(qǐng)求報(bào)文進(jìn)行相應(yīng)的處理，并返回響應(yīng)報(bào)文給瀏覽器。比如請(qǐng)求報(bào)文想要獲?。℅ET） index.html 這個(gè)文件，那么服務(wù)器就會(huì)找到 index.html 文件，然后將此文件作為響應(yīng)報(bào)文中的響應(yīng)體發(fā)送給瀏覽器。

響應(yīng)報(bào)文包括響應(yīng)行、響應(yīng)頭、響應(yīng)空行和響應(yīng)體。在響應(yīng)行中會(huì)指定 HTTP 版本、狀態(tài)碼和對(duì)狀態(tài)碼的解釋信息，比如 HTTP/1.1 200 OK ，其中 200 是響應(yīng)碼，指請(qǐng)求被正常處理，也就是成功 OK 的意思。

6. 瀏覽器解析渲染頁(yè)面

瀏覽器收到服務(wù)器的響應(yīng)報(bào)文后，從響應(yīng)體中得到相應(yīng)資源，如 HTML 文件、圖片、視頻等，并進(jìn)行渲染，然后將結(jié)果呈現(xiàn)給用戶(hù)。

7. 斷開(kāi) TCP 連接

當(dāng)數(shù)據(jù)完成請(qǐng)求到返回的過(guò)程之后，根據(jù)請(qǐng)求/相應(yīng)頭中 Connection 的 Keep-Alive 屬性可以選擇是否斷開(kāi) TCP 連接，如果不需要再進(jìn)行數(shù)據(jù)通信，即可以關(guān)閉連接，此時(shí)則會(huì)發(fā)生四次揮手行為。

注意：

瀏覽器為了提升性能，在 URL 解析之后，實(shí)際會(huì)先查詢(xún)是否有緩存，如果緩存命中，則直接返回緩存資源。

如果是 HTTPS 協(xié)議，在建立 TCP 連接之后，還需要進(jìn)行 SSL/TLS 握手過(guò)程，以協(xié)商出一個(gè)會(huì)話(huà)密鑰，用于消息加密，提升安全性。

本文轉(zhuǎn)載自微信公眾號(hào)「一楓說(shuō)碼」，作者「一楓說(shuō)碼」，可以通過(guò)以下二維碼關(guān)注。

轉(zhuǎn)載本文請(qǐng)聯(lián)系「一楓說(shuō)碼」公眾號(hào)。