一,URL解析
瀏覽器會對輸入的?URL(統一資源定位符)?進行拆解,搞清楚 “目標是誰、要獲取什么資源
https://www.baidu.com/s?wd=CDN
?拆解后:
協議(Scheme):https
(加密通信協議,比 HTTP 更安全);
- 協議(Scheme):
https
(加密通信協議,比 HTTP 更安全); - 域名(Domain):
www.baidu.com
(要訪問的服務器 “名字”,相當于 “門牌號”); - 路徑(Path):
/s
(服務器上的具體 “文件夾”,對應百度搜索功能); - 參數(Query):
wd=CDN
(要傳遞給服務器的 “指令”,即 “搜索關鍵詞是 CDN”)。
瀏覽器解析完后將會使用HTTPS協議,默認端口號為443,同時會將域名和需要請求的資源分開,從而了解需要請求的是哪個服務器,請求的是服務器上什么資源。
二,DNS域名解析
知道域名后,瀏覽器通過解析域名獲取目標服務器的IP地址,由域名轉換得到 IP 地址就是 DNS 協議做的事情。
1,緩存查詢
瀏覽器緩存查詢:先查瀏覽器本地緩存(比如之前訪問過百度,瀏覽器已保存?
www.baidu.com
?對應的 IP),有則直接用,無則進入下一步;操作系統緩存查詢:查電腦 / 手機系統的 DNS 緩存(如 Windows 的?
hosts
?文件、手機系統緩存),有則用,無則進入下一步;本地 DNS 服務器查詢:向你網絡運營商(如電信、聯通)分配的 “本地 DNS 服務器” 發起查詢(這是最常用的一步),運營商服務器通常已緩存主流域名的 IP,有則返回,無則進入最后一步;
2,直接查詢
根域名服務器 → 頂級域名服務器 → 權威域名服務器查詢:
先查 “根域名服務器”(全球共 13 組,負責指引方向),根服務器會告訴本地 DNS:“com 后綴的域名歸頂級域名服務器管”;
本地 DNS 再查 “.com 頂級域名服務器”,頂級服務器會告訴它:“baidu.com 的域名歸百度自己的權威域名服務器管”;
最后查 “百度權威域名服務器”,它會返回 www.baidu.com 對應的 真實 IP 地址(如 180.101.49.11)。
3,cdn的dns查詢
1,什么是·cdn
CDN 即內容分發網絡(Content Delivery Network),是一種分布式的服務器網絡,旨在通過將內容緩存到多個地理位置的服務器上,加速內容的分發和傳遞。(最優路徑
CDN 的 DNS(通常是 CDN 廠商提供的 “權威 DNS”,如阿里云 CDN 的 DNS、Cloudflare 的 DNS)會結合用戶場景、節點狀態動態選擇 IP,核心邏輯包括:
基于用戶地理位置:通過用戶的本地 DNS IP(或 HTTP 請求中的地理位置信息)判斷用戶所在區域,返回該區域的 CDN 邊緣節點 IP(比如上海用戶返回上海的 CDN 節點,廣州用戶返回廣州的 CDN 節點);
基于網絡運營商:區分用戶是電信、聯通、移動還是廣電網絡,返回對應運營商的 CDN 節點 IP(避免跨運營商訪問的網絡延遲,比如電信用戶不返回聯通節點);
基于節點負載 / 健康度:實時檢測 CDN 節點的帶寬占用、服務器負載、故障狀態,若某個節點負載過高或故障,自動跳過該節點,返回其他健康節點的 IP;
基于訪問策略:支持按業務需求定制解析(比如給 VIP 用戶分配帶寬更充足的節點,給測試用戶分配特定測試節點)。
三,建立TCP鏈接
拿到目標 IP(服務器 IP 或 CDN 節點 IP)后,瀏覽器會通過?TCP 協議?與目標服務器建立 “可靠的雙向通信通道”,這個過程就是經典的?TCP 三次握手(確保雙方都能正常收發數據):
1,第一次握手(客戶端發請求):
瀏覽器(客戶端)向服務器發送一個 “SYN” 數據包,意思是 “我想和你建立連接,你準備好了嗎?”;
2,第二次握手(服務器回響應):
服務器收到 SYN 后,回復 “SYN+ACK” 數據包,意思是 “我準備好了,你也準備好吧?”;
3,第三次握手(客戶端確認):
瀏覽器收到 SYN+ACK 后,再發一個 “ACK” 數據包,意思是 “我也準備好了,連接可以建立了!”。
三次握手完成后,客戶端和服務器之間的 “雙向通道” 正式打通,接下來可以傳輸數據了。
四,TLS四次握手
1,什么是·TLS
TLS(Transport Layer Security,傳輸層安全協議)是一種用于在網絡通信中保障數據隱私、完整性和身份真實性的加密協議,主要作用是在客戶端(如瀏覽器)和服務器(如網站服務器)之間建立安全的 “加密通道”,防止數據在傳輸過程中被竊取、篡改或偽造。
2,具體流程
如果 URL 協議是?HTTPS
(而非?HTTP
),在 TCP 連接建立后,還會額外進行?TLS 握手(加密通道建立),防止數據在傳輸中被竊取、篡改(比如你輸入的密碼、支付信息)。
以 TLS 1.3 為例(主流版本,比舊版本更快),核心流程是:
1,第一次握手
客戶端向服務器發送 “TLS 版本、支持的加密算法列表、隨機數 A”;
2,第二次握手
服務器回復 “確認的 TLS 版本、選定的加密算法、隨機數 B、服務器證書(證明自己是真實網站,非釣魚)”;
3,第三次握手
客戶端驗證服務器證書(通過操作系統 / 瀏覽器內置的 “根證書” 驗證,確保證書有效),然后用 “隨機數 A + 隨機數 B + 證書公鑰” 生成一個 “會話密鑰”,發給服務器;
4,第四次握手
服務器用自己的 “私鑰” 解密拿到會話密鑰,雙方確認 “后續數據都用這個會話密鑰加密傳輸”。
TLS 握手完成后,后續的所有數據(如瀏覽器的請求、服務器的響應)都會被加密,即使被中間設備攔截,也無法破解。
TCP 三次握手完成后,瀏覽器與目標服務器之間就建立了一個可靠的虛擬通道。如果URL中使用的是http協議,那么瀏覽器就可以發起HTTP請求了。
五,瀏覽器發起請求
1,發送請求
加密通道(或 TCP 通道)建立后,瀏覽器會向服務器發送?HTTP 請求報文,明確 “要獲取的資源、請求參數、自身信息”。
2,請求報文結構
請求報文的核心內容(以 GET 請求為例)包括:
請求行:GET /s?wd=CDN HTTP/1.1
(請求方法:GET;請求路徑:/s;請求參數:wd=CDN;HTTP 版本:1.1);
請求頭:包含瀏覽器信息(如?User-Agent: Chrome/120.0.0.0
)、接受的文件格式(如?Accept: text/html, image/png
)、Cookie(如登錄狀態)等;
請求體:GET 請求無請求體(參數在 URL 里),POST 請求(如表單提交)會在這里放參數(如用戶名、密碼)
六,服務器響應
服務器(或 CDN 節點)收到 HTTP 請求后,會按以下邏輯處理并返回響應:
1,解析請求服務器
讀取請求行、請求頭,明確 “用戶要什么資源、用什么瀏覽器、有沒有登錄”;
2,處理業務邏輯:
若請求的是靜態資源(如圖片、CSS、JS,且 CDN 節點有緩存):CDN 節點直接從本地緩存讀取資源,無需回源;
若請求的是動態資源(如百度搜索結果、用戶個人中心):服務器會執行代碼(如查詢數據庫、計算結果),生成動態內容(如搜索結果頁面的 HTML);
若請求的資源不存在:服務器會生成 “404 Not Found” 錯誤頁面
3,返回響應報文
狀態行:
HTTP/1.1 200 OK
(HTTP 版本:1.1;狀態碼:200 表示成功,404 表示資源不存在,500 表示服務器錯誤);響應頭:包含資源類型(如?
Content-Type: text/html
?表示是 HTML 頁面)、資源大小(如?Content-Length: 1024
)、緩存策略(如?Cache-Control: max-age=3600
?表示緩存 1 小時)等;響應體:實際的資源內容(如 HTML 代碼、圖片二進制數據、JSON 數據)。
七,瀏覽器渲染
1,解析 HTML,生成 DOM 樹:
瀏覽器讀取 HTML 代碼,按標簽層級(如?<html>
?→?<body>
?→?<div>
)生成 “文檔對象模型(DOM)”,描述頁面的結構;
2,解析 CSS,生成 CSSOM 樹:
讀取 CSS 代碼(包括?<style>
?標簽、外部 CSS 文件),生成 “CSS 對象模型(CSSOM)”,描述頁面的樣式(如字體大小、顏色、布局);
3,結合 DOM 和 CSSOM,生成渲染樹:
只保留 “需要顯示的節點”(如隱藏的?display: none
?節點會被剔除),并為每個節點附加樣式,形成 “渲染樹”;
4,布局(Layout)→ 繪制(Paint)→ 合成(Composite):
- 布局:計算渲染樹中每個節點的位置、大小(如?
<div>
?放在頁面左上角,寬 200px,高 100px); - 繪制:按布局結果,將節點的顏色、背景、圖片等 “畫” 在瀏覽器的 “畫布” 上;
- 合成:將繪制好的 “圖層”(如文字層、圖片層)合并成一個完整的頁面,顯示在瀏覽器窗口中。
九,TCP斷開連接
八,總結
1,本質
從輸入 URL 到頁面呈現,本質是 “尋址→建通道→發請求→處理→響應→渲染” 的閉環:
- DNS 負責 “尋址”(找服務器 / CDN 節點);
- TCP/TLS 負責 “建通道”(可靠 + 安全);
- HTTP 負責 “傳數據”(請求 + 響應);
- 瀏覽器負責 “轉結果”(渲染成可視化頁面)。
2,壓縮總結
URL明確目標?--> DNS域名解析(CDN找最優路線) --> TCP三次握手連接通道 --> TLS加密
--> HTTP請求 --> HTTP響應 --> 瀏覽器渲染 --> TCP四次分手斷開連接