從輸入URL到頁面加載完成，發(fā)生了一系列復雜的步驟，涉及到瀏覽器、DNS服務器、Web服務器等多個組件的協(xié)同工作。下面是詳細的過程：
1. 用戶輸入URL并按下回車
用戶在瀏覽器地址欄輸入URL并按下回車。
2. 瀏覽器查找緩存
瀏覽器首先檢查本地緩存中是否有該URL的資源，如果有且未過期，則直接從緩存中加載資源。
3. DNS解析
如果緩存中沒有資源或資源已過期，瀏覽器需要將域名解析為IP地址：
- 瀏覽器檢查本地hosts文件，看是否有對應的IP地址。
- 如果hosts文件中沒有，瀏覽器向本地DNS服務器（通常由ISP提供）發(fā)送DNS查詢請求。
- 本地DNS服務器如果有緩存，則返回IP地址；如果沒有，則逐級查詢上級DNS服務器，直到根DNS服務器。
- 最終獲取到域名對應的IP地址，并返回給瀏覽器。
4. 建立TCP連接（三次握手）
瀏覽器通過獲取到的IP地址，向服務器發(fā)起TCP連接，進行三次握手：
-
客戶端發(fā)送SYN包：
- 客戶端向服務器發(fā)送一個SYN（Synchronize）包，請求建立連接。這個包包含一個初始序列號（seq=x）。
- 狀態(tài)轉(zhuǎn)換： 客戶端從CLOSED狀態(tài)轉(zhuǎn)換為SYN-SENT狀態(tài)。
-
服務器返回SYN-ACK包：
- 服務器接收到SYN包后，發(fā)送一個SYN-ACK包，表示同意連接請求。這個包包含服務器的初始序列號（seq=y）和對客戶端SYN包的確認號（ack=x+1）。
- 狀態(tài)轉(zhuǎn)換： 服務器從CLOSED狀態(tài)轉(zhuǎn)換為SYN-RECEIVED狀態(tài)。
-
客戶端發(fā)送ACK包：
- 客戶端接收到SYN-ACK包后，發(fā)送一個ACK（Acknowledgment）包，確認連接建立。這個包包含客戶端對服務器SYN包的確認號（ack=y+1）。
- 狀態(tài)轉(zhuǎn)換： 客戶端進入ESTABLISHED狀態(tài)，服務器接收到ACK包后也進入ESTABLISHED狀態(tài)。
5. 發(fā)送HTTP請求
TCP連接建立后，瀏覽器向服務器發(fā)送HTTP請求：
- 請求行：包含請求方法（GET/POST）、URL和HTTP版本。
- 請求頭：包含瀏覽器類型、請求數(shù)據(jù)類型、授權(quán)信息等。
- 請求體：對于POST請求，包含提交的數(shù)據(jù)。
6. 服務器處理請求并返回響應
服務器接收到HTTP請求后，進行處理并返回HTTP響應：
- 響應行：包含HTTP版本和狀態(tài)碼（如200表示成功）。
- 響應頭：包含內(nèi)容類型、日期、服務器信息等。
- 響應體：包含請求的資源，如HTML文檔、CSS、JS文件等。
7. 瀏覽器接收響應并處理
瀏覽器接收到服務器的響應后，開始處理和渲染頁面：
- 解析HTML：瀏覽器解析HTML文檔，構(gòu)建DOM樹。
- 解析CSS：瀏覽器解析CSS文件，生成CSSOM（CSS對象模型）。
- 構(gòu)建渲染樹：結(jié)合DOM樹和CSSOM，生成渲染樹。
- 布局和繪制：根據(jù)渲染樹計算每個節(jié)點的位置和大小，進行布局和繪制。
- 執(zhí)行JavaScript：如果HTML中包含JS腳本，瀏覽器會解析并執(zhí)行JS代碼，可能會修改DOM或CSSOM，重新布局和繪制頁面。
8. 關(guān)閉TCP連接（四次揮手）
當頁面加載完成或連接超時，瀏覽器和服務器通過四次揮手關(guān)閉TCP連接：
-
客戶端發(fā)送FIN包：
- 客戶端向服務器發(fā)送一個FIN（Finish）包，請求關(guān)閉連接。這個包包含一個序列號（seq=u）。
- 狀態(tài)轉(zhuǎn)換： 客戶端從ESTABLISHED狀態(tài)轉(zhuǎn)換為FIN-WAIT-1狀態(tài)。
-
服務器返回ACK包：
- 服務器接收到FIN包后，發(fā)送一個ACK包，確認已收到關(guān)閉請求。這個包包含對客戶端FIN包的確認號（ack=u+1）。
- 狀態(tài)轉(zhuǎn)換： 服務器從ESTABLISHED狀態(tài)轉(zhuǎn)換為CLOSE-WAIT狀態(tài)，客戶端接收到ACK包后從FIN-WAIT-1狀態(tài)轉(zhuǎn)換為FIN-WAIT-2狀態(tài)。
-
服務器發(fā)送FIN包：
- 服務器發(fā)送一個FIN包，請求關(guān)閉連接。這個包包含一個序列號（seq=v）。
- 狀態(tài)轉(zhuǎn)換： 服務器從CLOSE-WAIT狀態(tài)轉(zhuǎn)換為LAST-ACK狀態(tài)。
-
客戶端返回ACK包：
- 客戶端接收到FIN包后，發(fā)送一個ACK包，確認已收到服務器的關(guān)閉請求。這個包包含對服務器FIN包的確認號（ack=v+1）。
- 狀態(tài)轉(zhuǎn)換： 客戶端從FIN-WAIT-2狀態(tài)轉(zhuǎn)換為TIME-WAIT狀態(tài)，服務器接收到ACK包后進入CLOSED狀態(tài)?？蛻舳嗽诮?jīng)過一段時間（通常為2倍的MSL，最大報文段壽命）后進入CLOSED狀態(tài)，完成連接關(guān)閉。
總結(jié)
image.png
從輸入URL到頁面加載完成，主要涉及以下步驟：
- 用戶輸入URL并按下回車。
- 瀏覽器查找緩存。
- DNS解析獲取IP地址。
- 建立TCP連接（三次握手）。
- 發(fā)送HTTP請求。
- 服務器處理請求并返回響應。
- 瀏覽器接收響應并處理（解析HTML、CSS、JS，構(gòu)建DOM樹和渲染樹，布局和繪制頁面）。
- 關(guān)閉TCP連接（四次揮手）。
這些步驟協(xié)同工作，確保用戶能夠順利訪問和加載所需的網(wǎng)頁內(nèi)容。
