【前端】面試八股文——輸入URL到頁面展示的過程

1. DNS解析

當用戶在瀏覽器中輸入URL并按下回車時，首先需要將域名轉換為IP地址，這個過程稱為DNS（域名系統）解析。具體步驟如下：

• 瀏覽器緩存：瀏覽器首先檢查自身緩存中是否有該域名的IP地址。
• 操作系統緩存：如果瀏覽器緩存中沒有找到，瀏覽器會向操作系統請求DNS信息。
• 路由器緩存：如果操作系統緩存也沒有找到，操作系統會向本地網絡中的路由器請求DNS信息。
• ISP DNS服務器：如果路由器緩存沒有命中，路由器會向ISP提供的DNS服務器請求域名解析。
• 遞歸查詢：如果ISP的DNS服務器也沒有找到，它會進行遞歸查詢，從根DNS服務器開始，逐級查詢頂級域（如.com）、二級域等，直到找到對應的IP地址。

2. TCP連接

獲得IP地址后，瀏覽器需要與服務器建立連接，這通常通過三次握手完成：

• 第一次握手：瀏覽器（客戶端）發送一個帶有SYN標志的數據包到服務器，表示請求建立連接。
• 第二次握手：服務器收到SYN數據包后，回復一個帶有SYN/ACK標志的數據包，表示同意建立連接。
• 第三次握手：客戶端收到SYN/ACK數據包后，再回復一個帶有ACK標志的數據包，連接建立完成。

3. 發送HTTP請求

TCP連接建立后，瀏覽器會構建一個HTTP請求報文并發送到服務器：

• 請求行：包含請求方法（如GET、POST）、URL和HTTP版本。
• 請求頭：包含主機、用戶代理、接受的文件類型等信息。
• 請求體：對于GET請求通常為空，對于POST請求包含提交的數據。

4. 服務器處理請求

服務器接收到HTTP請求后，會進行以下操作：

• 請求解析：解析請求報文，提取請求的資源路徑和其他信息。
• 資源查找：根據請求路徑查找對應的資源（如HTML文件、圖像等）。
• 生成響應：將查找到的資源封裝到HTTP響應報文中，準備返回給客戶端。

5. 瀏覽器接收響應

瀏覽器接收服務器的響應報文，并進行解析：

• 狀態行：包含HTTP版本、狀態碼（如200、404）和狀態描述。
• 響應頭：包含內容類型、內容長度、服務器信息等。
• 響應體：包含實際的資源內容（如HTML、CSS、JavaScript等）。

6. 渲染頁面

瀏覽器根據響應內容開始渲染頁面，步驟如下：

• 解析HTML：瀏覽器解析HTML文件，構建DOM樹。
• 解析CSS：解析CSS文件，構建CSSOM樹。
• 構建渲染樹：將DOM樹和CSSOM樹合并，生成渲染樹。
• 布局（layout）：計算每個元素的大小和位置。
• 繪制（painting）：將渲染樹中的元素繪制到屏幕上。

7. 執行JavaScript

瀏覽器解析并執行HTML中的JavaScript：

• 解析腳本：瀏覽器解析并執行內嵌的或外部引用的JavaScript。
• 操作DOM：JavaScript可能會操作DOM，改變頁面內容。
• 重新渲染：如果JavaScript修改了DOM，瀏覽器可能會重新計算布局和繪制頁面。

8. 加載其他資源

HTML文件中可能引用了其他資源（如圖片、視頻、字體等），瀏覽器會根據需要加載這些資源：

• 并行加載：瀏覽器可以并行發送多個HTTP請求以加快資源加載速度。
• 處理響應：每個資源的加載過程與主HTML文件類似，會經過DNS解析、TCP連接、HTTP請求和響應處理等步驟。

9. 建立安全連接（HTTPS）

如果使用HTTPS，瀏覽器在建立TCP連接后會進行SSL/TLS握手，以建立加密通道：

• 協商加密算法：客戶端和服務器協商使用的加密算法。
• 交換密鑰：客戶端和服務器交換密鑰，建立加密通信通道。
• 驗證證書：客戶端驗證服務器的SSL證書是否有效。

10. 優化性能

瀏覽器會進行一些性能優化，以提高頁面加載速度和用戶體驗：

• 緩存：緩存常用資源以減少重復加載。
• 預加載：提前加載可能用到的資源。
• 壓縮：對資源進行壓縮以減少傳輸的數據量。
• 使用HTTP/2：HTTP/2支持多路復用、頭部壓縮等特性，提高傳輸效率。

通過這些詳細的步驟，輸入URL到頁面完全展示的整個過程得以實現。理解這個過程不僅有助于提升前端開發的技術水平，也有助于優化頁面加載速度，提高用戶體驗。