您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

從輸入 URL 到頁面呈現：Web 頁面訪問全流程深度解析與網絡協議速查表

編輯：Java 綜合教學

從輸入 URL 到頁面呈現：Web 頁面訪問全流程深度解析與網絡協議速查表

在瀏覽器地址欄輸入 https://www.sina.com 並按下回車，背後發生了什麼？本文系統梳理從 DNS 解析、TCP 連接、HTTP 請求響應到瀏覽器渲染的完整鏈路，並附贈 TCP/UDP 常用端口速查表，是 Web 開發者必備的核心知識圖譜。

一、核心流程 11 步全景圖

瀏覽器檢查本地緩存：瀏覽器緩存、系統 hosts 文件（C:\Windows\System32\drivers\etc\hosts / /etc/hosts）。
DNS 域名解析：遞歸查詢 → 根域名服務器 → 頂級域服務器 → 權威域名服務器 → 返回目標 IP（如 218.30.13.36）。
建立 TCP 連接：三次握手（SYN, SYN+ACK, ACK），確立可靠雙工通道。
發送 HTTP 請求：請求行（Method URL Version）、請求頭（Host, Cookie, User-Agent...）、請求體。
服務器處理請求：Web 容器（Tomcat/Nginx）路由到對應 Servlet/Controller，執行業務邏輯，查詢數據庫，生成響應數據。
返回 HTTP 響應：狀態行（Version StatusCode ReasonPhrase）、響應頭（Content-Type, Set-Cookie...）、響應體（HTML/JSON/圖片...）。
瀏覽器解析渲染：HTML → DOM Tree，CSS → CSSOM Tree，合成 Render Tree → Layout → Paint → Composite。
加載子資源：並行下載 CSS/JS/圖片/字體，JS 執行可能阻塞渲染（defer/async 優化）。
頁面可交互：DOMContentLoaded / load 事件觸發，用戶可操作。

二、關鍵知識點深度補充

1. hosts 文件實戰：本地開發/測試域名映射

# Windows: C:\Windows\System32\drivers\etc\hosts
# Linux/Mac: /etc/hosts
127.0.0.1   www.local-dev.com   # 將域名指向本機
192.168.1.100  api.test-server.com  # 指向測試環境

修改生效即時，無需重啟瀏覽器。常用於開發聯調、屏蔽廣告域名、測試環境切換。

2. DNS 故障排查技巧

若網頁打不開，先 ping 8.8.8.8（Google DNS）或 ping 223.5.5.5（阿里雲 DNS）測試網絡連通性；再 nslookup www.sina.com 檢查域名解析是否正常。若 IP 通但域名不通，多半是 DNS 故障或劫持。

3. HTTP 請求/響應三部分結構

請求：請求行 | 請求頭 | 請求體
響應：狀態行 | 響應頭 | 響應體

三、傳輸層協議：TCP vs UDP 核心差異

特性	TCP (Transmission Control Protocol)	UDP (User Datagram Protocol)
連接性	面向連接（三次握手/四次揮手）	無連接，即發即收
可靠性	可靠：序列號、ACK、重傳、流控、擁塞控制	不可靠：不保證送達、不保證順序
數據邊界	字節流，無邊界（需應用層分幀）	數據報，保留邊界
效率	開銷大，延遲高	開銷小，延遲低
典型應用	HTTP/HTTPS, FTP, SMTP, SSH, MySQL	DNS, SNMP, TFTP, 視頻直播, 即時遊戲

四、常見 TCP/UDP 端口速查表

協議/服務	端口	說明
FTP 控制	21	文件傳輸控制連接
SSH	22	安全遠程登錄
Telnet	23	明文遠程登錄（不安全）
SMTP	25	郵件發送
DNS	53	域名解析 (TCP/UDP 均用)
HTTP	80	Web 明文傳輸
POP3	110	郵件接收
IMAP	143	郵件訪問協議
HTTPS	443	Web 加密傳輸 (TLS/SSL)
RDP	3389	Windows 遠程桌面