在瀏覽器中輸入一個(gè)URL并按下回車(chē)鍵后，會(huì)發(fā)生一系列復(fù)雜且有條不紊的步驟，從請(qǐng)求服務(wù)器到最終頁(yè)面展示在你的屏幕上。這個(gè)過(guò)程可以分為以下幾個(gè)關(guān)鍵步驟：

1. URL 解析
2. DNS 查詢
3. TCP 連接
4. 發(fā)送 HTTP 請(qǐng)求
5. 服務(wù)器處理請(qǐng)求
6. 接收 HTTP 響應(yīng)
7. 瀏覽器渲染頁(yè)面

1. URL 解析（示例）

URL（Uniform Resource Locator）是一種統(tǒng)一資源定位符，它包含了訪問(wèn)資源所需的所有信息。一個(gè)典型的URL格式如下：

http://www.example.com:80/path/to/resource?query=param#fragment

解析過(guò)程中，瀏覽器會(huì)將URL拆分為多個(gè)部分：

• 協(xié)議（Scheme）：如http或https。
• 主機(jī)（Host）：如www.example.com。
• 端口（Port）：默認(rèn)為80（HTTP）或443（HTTPS），如果沒(méi)有顯式指定，瀏覽器會(huì)使用默認(rèn)端口。
• 路徑（Path）：服務(wù)器上的資源路徑。
• 查詢參數(shù)（Query Parameters）：以?開(kāi)頭的參數(shù)部分。
• 片段標(biāo)識(shí)符（Fragment Identifier）：以#開(kāi)頭的部分，指向頁(yè)面內(nèi)的某個(gè)位置。

2. DNS 查詢

瀏覽器需要將URL中的主機(jī)名轉(zhuǎn)換為IP地址，這個(gè)過(guò)程通過(guò)DNS（Domain Name System）來(lái)完成。DNS 查詢的步驟包括：

• 瀏覽器首先檢查本地緩存中是否有該域名的IP地址。
• 如果沒(méi)有，瀏覽器會(huì)向本地DNS服務(wù)器發(fā)送查詢請(qǐng)求。
• 本地DNS服務(wù)器會(huì)遞歸查詢其他DNS服務(wù)器，直到找到對(duì)應(yīng)的IP地址并返回給瀏覽器。

3. TCP 連接

得到了IP地址后，瀏覽器需要與服務(wù)器建立連接。這個(gè)過(guò)程使用TCP（Transmission Control Protocol）完成。TCP連接的過(guò)程包括三次握手：

1. 客戶端發(fā)送SYN（同步）包：請(qǐng)求建立連接。
2. 服務(wù)器返回SYN-ACK（同步-確認(rèn)）包：同意建立連接。
3. 客戶端發(fā)送ACK（確認(rèn)）包：確認(rèn)連接建立。

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

TCP連接建立后，瀏覽器會(huì)發(fā)送一個(gè)HTTP請(qǐng)求。一個(gè)典型的HTTP請(qǐng)求包括以下部分：

• 請(qǐng)求行（Request Line）：包含請(qǐng)求方法（如GET或POST）、請(qǐng)求的URL路徑和HTTP版本。
• 請(qǐng)求頭（Headers）：包含客戶端信息、期望的響應(yīng)格式等。
• 請(qǐng)求體（Body）：POST請(qǐng)求時(shí)可能包含提交的數(shù)據(jù)。

5. 服務(wù)器處理請(qǐng)求

服務(wù)器接收到HTTP請(qǐng)求后，會(huì)進(jìn)行處理：

• 解析請(qǐng)求：服務(wù)器解析請(qǐng)求行和請(qǐng)求頭，提取所需信息。
• 路由請(qǐng)求：根據(jù)請(qǐng)求路徑和方法，將請(qǐng)求路由到對(duì)應(yīng)的處理程序。
• 生成響應(yīng)：處理程序處理請(qǐng)求后生成HTTP響應(yīng)，包括響應(yīng)行、響應(yīng)頭和響應(yīng)體。

6. 接收 HTTP 響應(yīng)

瀏覽器接收到服務(wù)器的HTTP響應(yīng)后，會(huì)進(jìn)行解析：

• 解析響應(yīng)行：確定HTTP狀態(tài)碼（如200表示成功，404表示資源未找到）。
• 解析響應(yīng)頭：提取響應(yīng)的元數(shù)據(jù)，如內(nèi)容類(lèi)型、內(nèi)容長(zhǎng)度等。
• 解析響應(yīng)體：獲取實(shí)際的數(shù)據(jù)內(nèi)容（如HTML、CSS、JavaScript）。

7. 瀏覽器渲染頁(yè)面

瀏覽器解析并渲染HTML內(nèi)容的過(guò)程包括以下步驟：

• 構(gòu)建DOM樹(shù)：解析HTML文檔并構(gòu)建DOM（文檔對(duì)象模型）樹(shù)。
• 構(gòu)建CSSOM樹(shù)：解析CSS文件并構(gòu)建CSSOM（CSS對(duì)象模型）樹(shù)。
• 執(zhí)行JavaScript：如果HTML中包含JavaScript文件，瀏覽器會(huì)下載并執(zhí)行它們。
• 構(gòu)建渲染樹(shù)：將DOM樹(shù)和CSSOM樹(shù)結(jié)合，構(gòu)建渲染樹(shù)。
• 布局和繪制：根據(jù)渲染樹(shù)進(jìn)行布局計(jì)算，將元素的位置和大小確定后進(jìn)行繪制，將頁(yè)面內(nèi)容顯示在屏幕上。

這篇博客可以作為面試八股，拱大家使用