文章中英模式

布魯斯前端面試題目 - 從輸入網址到頁面顯示的過程

深入解析從瀏覽器輸入URL到頁面完全載入的完整過程，包含DNS查詢、TCP連接、HTTP請求、渲染過程等環節，掌握前端面試中的網路與瀏覽器核心知識。

文章中英模式

懶得看文章？那就來看影片吧

從輸入網址到頁面顯示的完整流程概述

當你在瀏覽器地址欄輸入一個URL並按下Enter後，會經過以下主要階段:

1. URL解析
2. DNS解析（網域名稱 → IP地址）
3. 建立TCP連接
4. 發送HTTP請求
5. 服務器處理請求並返回HTTP響應
6. 瀏覽器解析HTML並請求其他資源
7. 瀏覽器渲染頁面
8. 關閉連接

  ┌──────────────────────────────────────────────────┐
  │                                                  │
  │  1️⃣ URL解析                                      │
  │  https://example.com/page                       │
  │                                                 │
  │  2️⃣ DNS解析                                      │
  │  example.com ──> IP (93.184.216.34)            │
  │                                                 │
  │  3️⃣ TCP連接                                      │
  │  客戶端 ⇄ 服務器 (三次握手)                       │
  │                                                 │
  │  4️⃣ HTTP請求                                     │
  │  GET /page HTTP/1.1 ──>                        │
  │                                                 │
  │  5️⃣ 服務器響應                                    │
  │  <── 200 OK + HTML內容                          │
  │                                                 │
  │  6️⃣ 請求其他資源                                  │
  │  獲取 CSS/JS/圖片                                │
  │                                                 │
  │  7️⃣ 渲染頁面                                     │
  │  DOM ──> CSSOM ──> 渲染 ──> 佈局 ──> 繪製        │
  │                                                 │
  │  8️⃣ 關閉連接                                     │
  │                                                 │
  └──────────────────────────────────────────────────┘

接下來我們會詳細解釋每個階段發生的事情。

第一階段: URL解析

瀏覽器首先解析URL的各個部分:

https://www.example.com:443/path/to/page?query=string#fragment
|-----||--------------||---||------------||-----------||----|
 協議     主機(域名)    端口    路徑          查詢參數    片段

1. 協議(Protocol): http, https, ftp等
2. 主機(Host): 網域名稱或IP地址
3. 端口(Port): 特定服務的通信端口（如HTTP默認80，HTTPS默認443）
4. 路徑(Path): 服務器上資源的路徑
5. 查詢參數(Query string): 向服務器傳遞的參數
6. 片段(Fragment): 頁面內的錨點，僅瀏覽器使用不發送給服務器

第二階段: DNS解析過程

DNS將網址(如www.example.com)轉換為電腦能理解的IP地址(如192.168.1.1)。

DNS查詢的順序:

1. 瀏覽器緩存: 先看瀏覽器是否記住這個網址
2. 電腦緩存: 再看電腦是否記住
3. 路由器緩存: 再問家裡的路由器
4. 網路供應商: 最後問網路供應商(ISP)
5. DNS伺服器查詢: 如果都沒有，就向網路上的DNS伺服器一層層查詢

DNS解析需要時間，這就是為什麼網站會使用CDN來加速這個過程。

第三階段: 建立連接

找到IP地址後，瀏覽器需要與伺服器建立連接:

TCP三次握手:

1. 第一次握手: 瀏覽器說「嗨，我想連接」
2. 第二次握手: 伺服器回應「好的，我收到了，可以連接」
3. 第三次握手: 瀏覽器說「太好了，我們開始通訊吧」

HTTPS的安全握手:

如果是HTTPS網站，在TCP連接後還會進行安全握手:

1. 打招呼: 瀏覽器說「我能用這些加密方式」
2. 確認方式: 伺服器選一種加密方式回應
3. 身分確認: 伺服器出示「身分證」(數位證書)
4. 交換密鑰: 雙方協商出一把「密鑰」
5. 開始加密: 之後的通訊都用這把密鑰加密

這就像你和銀行通話前，先確認對方真的是銀行，然後用只有你們知道的暗號交談，防止別人偷聽。這也是為什麼HTTPS比HTTP多花一點時間，但更安全。

第四階段: 發送HTTP請求

TCP連接建立後，瀏覽器構造HTTP請求發送到服務器:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
Accept: text/html,application/xhtml+xml,...
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Cookie: user_session=abc123; visit_count=5

HTTP請求包含:

1. 請求行: 包含HTTP方法(GET, POST等)、請求路徑和HTTP版本
2. 請求頭: 包含各種元數據如User-Agent, Accept等
3. 請求體: GET通常無請求體，POST包含表單數據等
4. Connection: keep-alive: 告訴服務器保持TCP連接開啟，讓多個HTTP請求共用同一連接。HTTP/1.1預設啟用，無需配置。這減少了建立新連接的開銷，加快頁面載入速度。

第五階段: 服務器處理請求並返回響應

服務器接收請求後:

1. 服務器解析HTTP請求
2. 執行必要的處理(查詢數據庫、處理業務邏輯等)
3. 組裝HTTP響應並返回

HTTP/1.1 200 OK
Date: Mon, 23 May 2023 22:38:34 GMT
Server: Apache/2.4.52 (Ubuntu)
Content-Type: text/html; charset=UTF-8
Content-Length: 138
Cache-Control: max-age=3600

<!DOCTYPE html>
<html>
<head>
  <title>Example Website</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <!-- 頁面內容 -->
</body>
</html>

HTTP響應包含:

1. 狀態行: HTTP版本、狀態碼和狀態信息
2. 響應頭: 包含各種元數據
3. 響應體: 包含實際的HTML內容或其他資源

第六階段: 瀏覽器解析HTML並請求其他資源（CRP路徑）

瀏覽器收到HTML後:

1. 解析HTML，構建DOM樹
2. 遇到外部資源(CSS, JavaScript, 圖片等)時發起新的HTTP請求
3. 解析CSS，構建CSSOM樹
4. 執行JavaScript代碼，可能會修改DOM和CSSOM

在這個過程中，瀏覽器可能會並行發起多個請求，但受到HTTP協議版本和瀏覽器限制:

1. HTTP/1.1: 每個域名有6-8個並行連接限制
2. HTTP/2: 單個連接可處理多個請求，大幅提高性能

第七階段: 瀏覽器渲染頁面（CRP路徑）

所有必要資源加載後，瀏覽器進行渲染過程:

1. 計算樣式: 結合DOM和CSSOM，確定每個節點的最終樣式
2. 布局(Layout/Reflow): 計算每個元素在屏幕上的位置和大小
3. 繪製(Paint): 填充像素，繪製文字、顏色、圖像等
4. 合成(Compositing): 將不同層合成到一起

這個過程非常複雜，現代瀏覽器會進行各種優化:

1. 增量渲染: 不等所有資源加載完就開始渲染
2. 分層渲染: 將頁面分成多個層進行獨立處理
3. 硬體加速: 使用GPU加速某些渲染操作

第八階段: 關閉連接

頁面完全載入後，如果HTTP頭中指定了"Connection: close"，TCP連接會關閉，通過四次揮手過程:

如果使用HTTP/1.1的Keep-Alive機制或HTTP/2，連接可能保持打開狀態以便復用，提高性能。

🔥 常見面試題目

(一) 簡述從地址欄輸入URL到頁面顯示的完整過程?

解答：完整過程包含以下關鍵步驟：

  +-------------+    +-------------+    +-------------+    +-------------+
  |   網路階段  | -> |   響應階段  | -> |   解析階段  | -> |   渲染階段  |
  +-------------+    +-------------+    +-------------+    +-------------+
  | 1. URL解析  |    | 1. 處理請求 |    | 1. 構建DOM  |    | 1. 樣式計算 |
  | 2. DNS查詢  |    | 2. 返回響應 |    | 2. 構建CSSOM|    | 2. 布局     |
  | 3. TCP連接  |    | 3. 接收數據 |    | 3. 執行JS   |    | 3. 繪製     |
  | 4. HTTP請求 |    |             |    |             |    | 4. 合成     |
  +-------------+    +-------------+    +-------------+    +-------------+

  流程順序：
  輸入URL ➜ URL解析 ➜ DNS查詢 ➜ TCP連接 ➜ (HTTPS則加SSL/TLS) ➜ HTTP請求 ➜
  服務器處理 ➜ 返回響應 ➜ 解析HTML/CSS/JS ➜ 渲染頁面 ➜ 頁面交互

重點是理解這個過程涉及網路通信、服務器處理、瀏覽器解析與渲染四大階段，每個階段都有優化空間。

(二) 瀏覽器渲染過程中的關鍵路徑是什麼?如何優化?

解答：參考前端性能優化題目的解釋網頁的渲染過程（CRP路徑）

(三) HTTPS對比HTTP在這個過程中增加了哪些步驟?

解答：HTTPS在HTTP基礎上增加了SSL/TLS握手過程，主要用於建立安全連接：

  客戶端                                      服務器
    |                                            |
    |  -------- Client Hello --------------->   |  1. 發送支持的加密套件和隨機數
    |                                            |
    |  <------- Server Hello ----------------   |  2. 回應選定套件、隨機數和證書
    |                                            |
    |  -------- 驗證+預主密鑰 ------------->   |  3. 驗證證書並發送加密的預主密鑰
    |                                            |
    |  <------- 確認加密通信 ---------------   |  4. 雙方生成會話密鑰並確認
    |                                            |
    |  === 開始加密HTTP通信 ================>   |
    |  <=================================>      |

這個握手過程發生在TCP連接之後、HTTP請求之前，為通信提供加密保護和身份驗證，有效防止中間人攻擊。