當我們在瀏覽器地址欄輸入一個 URL 并按下回車，頁面加載的過程中會涉及多個關鍵步驟，包括 DNS 解析、TCP 連接、HTTP 請求、服務器處理、瀏覽器渲染 等。下面是詳細的執(zhí)行流程：

1. 用戶輸入 URL

用戶在瀏覽器地址欄輸入一個 URL，例如：

https://www.example.com

• 如果 URL 沒有協(xié)議（如 http:// 或 https://），瀏覽器會默認補充 http:// 或 https://。
• 如果只輸入關鍵字（如 example），瀏覽器會使用默認搜索引擎查詢。
• 如果之前訪問過，瀏覽器可能直接從緩存加載（強緩存 / 協(xié)商緩存）。

2. 瀏覽器進行 DNS 解析

目標：找到 www.example.com 對應的 IP 地址

瀏覽器首先檢查是否已有緩存：

• 瀏覽器緩存（DNS 解析緩存）
• 操作系統(tǒng)緩存（/etc/hosts 或 C:\Windows\System32\drivers\etc\hosts）
• 路由器緩存（路由器可能有 DNS 解析緩存）
• ISP DNS 服務器（向本地 ISP 運營商的 DNS 服務器查詢）
• 根 DNS 服務器 → 頂級域名服務器（TLD） → 權威 DNS 服務器，最終獲取 IP 地址。

最終，www.example.com 被解析為 IP 地址，例如：

93.184.216.34

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

目標：客戶端與服務器建立可靠的 TCP 連接

瀏覽器通過 TCP 三次握手 與服務器建立連接：

• 客戶端發(fā)送 SYN（請求建立連接）
• 服務器返回 SYN-ACK（確認連接請求）
• 客戶端返回 ACK（連接建立）

如果是 HTTPS，還需要進行 TLS/SSL 握手：

• 服務器提供 SSL 證書，客戶端驗證證書有效性（防止中間人攻擊）。
• 雙方協(xié)商加密算法，交換密鑰，確保數(shù)據(jù)安全。

4. 發(fā)送 HTTP 請求

目標：瀏覽器請求服務器上的頁面資源

瀏覽器向服務器發(fā)送 HTTP 請求，例如：

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive

關鍵部分：

• GET：請求方法（也可能是 POST、PUT、DELETE）。
• Host: www.example.com：服務器主機名（虛擬主機）。
• User-Agent：瀏覽器信息。
• Accept：告訴服務器客戶端希望接收的資源類型。
• Connection: keep-alive：保持 TCP 連接，避免重復建立連接。

5. 服務器處理請求

目標：服務器解析請求，并返回對應的 HTML 頁面

服務器收到請求后，執(zhí)行以下操作：

• 查找緩存（CDN / 服務器緩存 / 代理緩存）。
• 請求靜態(tài)資源（如果請求的是 HTML、CSS、JS、圖片）。
• 執(zhí)行動態(tài)代碼（如 PHP、Node.js、Python 生成 HTML）。
• 訪問數(shù)據(jù)庫（如 MySQL、MongoDB）查詢數(shù)據(jù)并返回頁面。
• 生成 HTTP 響應，例如：

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Cache-Control: max-age=3600

并返回 HTML 內容。

6. 瀏覽器解析 HTML

目標：瀏覽器解析 HTML 結構，構建頁面

瀏覽器解析 HTML 頁面時，執(zhí)行以下步驟：

• 解析 HTML，構建 DOM 樹
• 解析 CSS，生成 CSSOM 樹
• 解析 JavaScript

a.如果 script 不是 async/defer，會 阻塞解析

b.async：異步加載并立即執(zhí)行

c.defer：異步加載，等 HTML 解析完成后執(zhí)行

• 合并 DOM 和 CSSOM，構建渲染樹
• 計算布局（Layout）

a.確定元素的大小、位置

• 繪制（Painting）

a.將元素渲染到屏幕

7. 加載外部資源

目標：加載 CSS、JS、圖片等外部資源

• CSS：影響頁面布局，會阻塞渲染（但不會阻塞 HTML 解析）。
• JS：

a.可能修改 DOM（導致重排）。

b.async/defer 可優(yōu)化加載順序。

• 圖片、視頻、字體：
• 通過 Lazy Loading 延遲加載，提高性能。

8. 瀏覽器渲染頁面

最終，瀏覽器將渲染完成的頁面 繪制到屏幕：

• 柵格化（分成像素塊）。
• 合成圖層（不同層級合成）。
• GPU 加速（硬件加速渲染）。

9. 用戶交互 & 瀏覽器事件

• JS 監(jiān)聽用戶事件（點擊、滾動等）。
• 瀏覽器根據(jù)用戶操作重新渲染頁面（如 requestAnimationFrame）。
• 回流（Reflow）和重繪（Repaint）：

a.回流：布局改變（影響性能）。

b.重繪：顏色、陰影等改變（較輕量）。

關鍵優(yōu)化點

1. 使用 CDN 加速（減少 DNS 解析時間）。
2. 開啟 HTTP/2（支持多路復用，減少 TCP 連接）。
3. 開啟 Gzip 壓縮（減少 HTML/CSS/JS 體積）。
4. 利用緩存（Cache-Control、ETag）。
5. 減少 DOM 操作（避免回流、重繪）。
6. 懶加載 & 代碼拆分（按需加載資源）。

總結：輸入 URL 到頁面展示的完整流程

面試官可能的追問

? 面試官：DNS 解析過程中有哪些優(yōu)化手段？
回答：

• 使用 DNS 預解析（<link rel="dns-prefetch" >）。
• 使用 CDN，讓用戶訪問最近的服務器。
• 配置 本地 hosts 文件，減少 DNS 查詢時間。

? 面試官：如何優(yōu)化瀏覽器渲染性能？
回答：

• 減少回流（Reflow）：避免頻繁修改 DOM 結構。
• 使用 requestAnimationFrame：優(yōu)化動畫流暢度。
• 使用 will-change：讓 GPU 預渲染關鍵元素。

? 面試官：為什么 JS 可能會阻塞頁面渲染？
回答：

• JS 可能修改 DOM，瀏覽器必須先執(zhí)行 JS，再繼續(xù)解析 HTML。
• 解決方案：使用 async/defer，或將 JS 放在 body 末尾。

總結

輸入 URL 到頁面展示的過程涉及 DNS 解析、TCP 連接、HTTP 請求、服務器處理、瀏覽器解析和渲染等多個步驟。通過優(yōu)化緩存、CDN、HTTP/2 和瀏覽器渲染策略，可以極大提高頁面加載速度！??