從輸入U(xiǎn)RL到頁(yè)面加載完成，發(fā)生了一系列復(fù)雜的步驟，涉及到瀏覽器、DNS服務(wù)器、Web服務(wù)器等多個(gè)組件的協(xié)同工作。下面是詳細(xì)的過程：

1. 用戶輸入U(xiǎn)RL并按下回車

用戶在瀏覽器地址欄輸入U(xiǎn)RL并按下回車。

2. 瀏覽器查找緩存

瀏覽器首先檢查本地緩存中是否有該URL的資源，如果有且未過期，則直接從緩存中加載資源。

3. DNS解析

如果緩存中沒有資源或資源已過期，瀏覽器需要將域名解析為IP地址：

1. 瀏覽器檢查本地hosts文件，看是否有對(duì)應(yīng)的IP地址。
2. 如果hosts文件中沒有，瀏覽器向本地DNS服務(wù)器（通常由ISP提供）發(fā)送DNS查詢請(qǐng)求。
3. 本地DNS服務(wù)器如果有緩存，則返回IP地址；如果沒有，則逐級(jí)查詢上級(jí)DNS服務(wù)器，直到根DNS服務(wù)器。
4. 最終獲取到域名對(duì)應(yīng)的IP地址，并返回給瀏覽器。

4. 建立TCP連接（三次握手）

瀏覽器通過獲取到的IP地址，向服務(wù)器發(fā)起TCP連接，進(jìn)行三次握手：

1. 客戶端發(fā)送SYN包：

   • 客戶端向服務(wù)器發(fā)送一個(gè)SYN（Synchronize）包，請(qǐng)求建立連接。這個(gè)包包含一個(gè)初始序列號(hào)（seq=x）。
   • 狀態(tài)轉(zhuǎn)換： 客戶端從CLOSED狀態(tài)轉(zhuǎn)換為SYN-SENT狀態(tài)。

2. 服務(wù)器返回SYN-ACK包：

   • 服務(wù)器接收到SYN包后，發(fā)送一個(gè)SYN-ACK包，表示同意連接請(qǐng)求。這個(gè)包包含服務(wù)器的初始序列號(hào)（seq=y）和對(duì)客戶端SYN包的確認(rèn)號(hào)（ack=x+1）。
   • 狀態(tài)轉(zhuǎn)換： 服務(wù)器從CLOSED狀態(tài)轉(zhuǎn)換為SYN-RECEIVED狀態(tài)。

3. 客戶端發(fā)送ACK包：

   • 客戶端接收到SYN-ACK包后，發(fā)送一個(gè)ACK（Acknowledgment）包，確認(rèn)連接建立。這個(gè)包包含客戶端對(duì)服務(wù)器SYN包的確認(rèn)號(hào)（ack=y+1）。
   • 狀態(tài)轉(zhuǎn)換： 客戶端進(jìn)入ESTABLISHED狀態(tài)，服務(wù)器接收到ACK包后也進(jìn)入ESTABLISHED狀態(tài)。

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

TCP連接建立后，瀏覽器向服務(wù)器發(fā)送HTTP請(qǐng)求：

1. 請(qǐng)求行：包含請(qǐng)求方法（GET/POST）、URL和HTTP版本。
2. 請(qǐng)求頭：包含瀏覽器類型、請(qǐng)求數(shù)據(jù)類型、授權(quán)信息等。
3. 請(qǐng)求體：對(duì)于POST請(qǐng)求，包含提交的數(shù)據(jù)。

6. 服務(wù)器處理請(qǐng)求并返回響應(yīng)

服務(wù)器接收到HTTP請(qǐng)求后，進(jìn)行處理并返回HTTP響應(yīng)：

1. 響應(yīng)行：包含HTTP版本和狀態(tài)碼（如200表示成功）。
2. 響應(yīng)頭：包含內(nèi)容類型、日期、服務(wù)器信息等。
3. 響應(yīng)體：包含請(qǐng)求的資源，如HTML文檔、CSS、JS文件等。

7. 瀏覽器接收響應(yīng)并處理

瀏覽器接收到服務(wù)器的響應(yīng)后，開始處理和渲染頁(yè)面：

1. 解析HTML：瀏覽器解析HTML文檔，構(gòu)建DOM樹。
2. 解析CSS：瀏覽器解析CSS文件，生成CSSOM（CSS對(duì)象模型）。
3. 構(gòu)建渲染樹：結(jié)合DOM樹和CSSOM，生成渲染樹。
4. 布局和繪制：根據(jù)渲染樹計(jì)算每個(gè)節(jié)點(diǎn)的位置和大小，進(jìn)行布局和繪制。
5. 執(zhí)行JavaScript：如果HTML中包含JS腳本，瀏覽器會(huì)解析并執(zhí)行JS代碼，可能會(huì)修改DOM或CSSOM，重新布局和繪制頁(yè)面。

8. 關(guān)閉TCP連接（四次揮手）

當(dāng)頁(yè)面加載完成或連接超時(shí)，瀏覽器和服務(wù)器通過四次揮手關(guān)閉TCP連接：

1. 客戶端發(fā)送FIN包：

   • 客戶端向服務(wù)器發(fā)送一個(gè)FIN（Finish）包，請(qǐng)求關(guān)閉連接。這個(gè)包包含一個(gè)序列號(hào)（seq=u）。
   • 狀態(tài)轉(zhuǎn)換： 客戶端從ESTABLISHED狀態(tài)轉(zhuǎn)換為FIN-WAIT-1狀態(tài)。

2. 服務(wù)器返回ACK包：

   • 服務(wù)器接收到FIN包后，發(fā)送一個(gè)ACK包，確認(rèn)已收到關(guān)閉請(qǐng)求。這個(gè)包包含對(duì)客戶端FIN包的確認(rèn)號(hào)（ack=u+1）。
   • 狀態(tài)轉(zhuǎn)換： 服務(wù)器從ESTABLISHED狀態(tài)轉(zhuǎn)換為CLOSE-WAIT狀態(tài)，客戶端接收到ACK包后從FIN-WAIT-1狀態(tài)轉(zhuǎn)換為FIN-WAIT-2狀態(tài)。

3. 服務(wù)器發(fā)送FIN包：

   • 服務(wù)器發(fā)送一個(gè)FIN包，請(qǐng)求關(guān)閉連接。這個(gè)包包含一個(gè)序列號(hào)（seq=v）。
   • 狀態(tài)轉(zhuǎn)換： 服務(wù)器從CLOSE-WAIT狀態(tài)轉(zhuǎn)換為L(zhǎng)AST-ACK狀態(tài)。

4. 客戶端返回ACK包：

   • 客戶端接收到FIN包后，發(fā)送一個(gè)ACK包，確認(rèn)已收到服務(wù)器的關(guān)閉請(qǐng)求。這個(gè)包包含對(duì)服務(wù)器FIN包的確認(rèn)號(hào)（ack=v+1）。
   • 狀態(tài)轉(zhuǎn)換： 客戶端從FIN-WAIT-2狀態(tài)轉(zhuǎn)換為TIME-WAIT狀態(tài)，服務(wù)器接收到ACK包后進(jìn)入CLOSED狀態(tài)。客戶端在經(jīng)過一段時(shí)間（通常為2倍的MSL，最大報(bào)文段壽命）后進(jìn)入CLOSED狀態(tài)，完成連接關(guān)閉。

總結(jié)

image.png

從輸入U(xiǎn)RL到頁(yè)面加載完成，主要涉及以下步驟：

1. 用戶輸入U(xiǎn)RL并按下回車。
2. 瀏覽器查找緩存。
3. DNS解析獲取IP地址。
4. 建立TCP連接（三次握手）。
5. 發(fā)送HTTP請(qǐng)求。
6. 服務(wù)器處理請(qǐng)求并返回響應(yīng)。
7. 瀏覽器接收響應(yīng)并處理（解析HTML、CSS、JS，構(gòu)建DOM樹和渲染樹，布局和繪制頁(yè)面）。
8. 關(guān)閉TCP連接（四次揮手）。

這些步驟協(xié)同工作，確保用戶能夠順利訪問和加載所需的網(wǎng)頁(yè)內(nèi)容。