瀏覽器幕後探險記:連線與請求的協定之旅

更新 發佈閱讀 8 分鐘

引言:指令與座標

當您在瀏覽器地址欄中鍵入一行網址,輕輕按下 Enter 鍵,又或是點擊搜尋引擎結果連結的那一刻,一切似乎就完成了。不到一秒的時間,絢麗的網頁內容便呈現在眼前。對我們而言,這是一個理所當然的日常動作;然而對瀏覽器來說,卻是要處理繁多任務的挑戰。

這趟旅程,開始於一個簡單的文字地址,需要被解構成精密坐標;接著,透過 DNS 查詢 尋找目的地(IP 位址);隨後,根據底層的 TCP 協定 建立一條可靠的「虛擬電話線」。

如果這是一趟要求保密的旅程(HTTPS),還需要進行一次複雜的 TLS 秘密交握,以確保溝通內容滴水不漏。

我們將一步一步跟著瀏覽器,探索這個看似平凡的動作背後,所有精密的 握手機制、安全判斷,以及最終發出請求 的複雜流程。準備好了嗎?讓我們一同揭開網路世界最基礎、也最不可或缺的第一步。

一:URL的秘密與DNS查詢

一切始於您輸入的網址。瀏覽器首先需要像偵探一樣,將這串文字拆解成可執行的指令。這個過程稱為 URL 解析,它將網址分解為四個關鍵部分:協議 (Scheme)、主機 (Host)、端口 (Port) 和 路徑 (Path),每個部分都指導著瀏覽器的下一步行動。

raw-image

主機名稱如何變成 IP 地址:DNS 查詢

瀏覽器知道要去哪個「主機」,但網路溝通需要的是具體的「IP 位址」。這時,DNS (Domain Name System,網域名稱系統) 就介入了。DNS 就像網際網路的電話簿,負責將人類易記的主機名稱轉換為機器可讀的 IP 位址。

這個過程非常直覺,就像在電話簿中查找聯繫人的電話一樣。 瀏覽器透過主機名稱找到對應的 IP 位址,一旦獲得這個「電話號碼」,就能確定伺服器的確切網路位置

二:建立連線 - 網路的連線接口 (Socket) 與 TCP 三次握手

有了 IP 位址,瀏覽器就可以透過 Socket 這個網路連線接口聯絡伺服器了。Socket 充當一條網路世界的通訊線路。

代理伺服器的中介角色

在直接連線目標伺服器之前,瀏覽器會檢查當前網路配置中是否需要通過 代理伺服器 (Proxy)

代理伺服器是一個中介,它可能用於企業安全、網路加速或隱私保護。如果存在代理,瀏覽器建立 Socket 連線的目標將是代理伺服器的 IP 地址,而不是網站的原始 IP。隨後,瀏覽器會將 HTTP 請求發給代理,再由代理轉發給目標伺服器。

透過 Socket 進行「握手 (Handshaking)」

要建立可靠的連線,我們必須使用 TCP (傳輸控制協議)TCP 連線的建立被稱為「三次握手 (Three-Way Handshake)」:

  1. 第一次握手 (SYN): 瀏覽器發送一個「請求連線」的信號給伺服器。
  2. 第二次握手 (SYN-ACK): 伺服器回覆「我收到了,也同意連線」。
  3. 第三次握手 (ACK): 瀏覽器再次確認「好的,我已收到你的回覆,現在開始傳輸數據」。

這個過程確保了建立了一條可靠的、雙向的數據傳輸通道。


三:安全與否?HTTP 與 HTTPS 的區別及 TLS 安全交握

Socket 連線建立後,瀏覽器會根據協議 (Scheme) 來決定如何傳輸數據。

  1. HTTP (端口 80): 數據以純文本格式在網路中傳輸,缺乏加密保護。
  2. HTTPS (端口 443): 在 HTTP 上加入了 TLS/SSL 進行加密。必須在發送請求前進行 TLS 握手

你可以想像,當你和同事想講八卦又不希望被別人知道時,你們會約定一個暗號。最簡單的就像凱薩密碼法:將每個字都往後延一個位數,原本的 "it is a apple" 傳出去就會變成 "ju jt b bqqmf"。即使訊息被攔截,外人看到也只是一堆亂碼。

加密的目標就在於此。 在網路世界,瀏覽器和伺服器進行的 TLS 握手,就是雙方在公開連線上秘密約定這個「暗號」(也就是對稱密鑰)的過程。

TLS 握手的目的是在客戶端和伺服器之間安全地協商出一個加密會話:

  1. 身份驗證: 伺服器會向瀏覽器展示其數字證書,證明身份。
  2. 密鑰協商: 雙方安全地生成一把用於後續通訊加密的「對稱密鑰」。

一旦 TLS 握手成功,之後所有的數據傳輸都將加密,確保了數據傳輸的機密性與完整性


四:HTTP 請求、協議演進與快取機制

瀏覽器的加速器:快取機制 (Caching)

在真正發送網路請求之前,瀏覽器會先檢查 本地快取。想像一下,您的瀏覽器就像廚師一樣

目的: 當您在準備做一頓晚餐,您不會直接衝去超市(伺服器)購買所有食材,而是會先檢查冰箱和儲藏室(本地快取)

這就是 條件式請求 的原理:廚師不會重新購買整套食材,而是會先確認東西不再或是已經過期才會去添購。

如果伺服器回傳 304 Not Modified,瀏覽器就會直接使用本地快取中的資源,避免了不必要的數據下載,極大地加快了頁面載入速度。

HTTP 協議版本演進:從 TCP 到 QUIC 的革命 (1.0, 1.1, 2.0, 3.0)

連線的持久性 是協議發展中的一個重大突破。在 HTTP/1.0 時代,瀏覽器每傳輸一個資源後連線就必須關閉,導致了大量的重複握手時間。

HTTP/1.1 引入的 Keep-Alive (持久連線) 機制就是這個原理:想像有個懶惰的工人,他不想大老遠地去借工具與還工具,因此只要這個工具能把螺絲鎖緊,他就不再跑去工具間找新的工具。Keep-Alive 允許瀏覽器在同一條 TCP 連線上發送多個請求,大幅減少了建立新連線所花費的時間和資源。

以下是 HTTP 協議的演進:

  • HTTP 1.0: 非持久連線。每次請求都需要重新建立 TCP 連線。
  • HTTP 1.1: 持久連線 (Keep-Alive)。允許在單一 TCP 連線上傳輸多個請求,減少重複握手時間。
  • HTTP/2 (2.0): 二進位幀、多工處理 (Multiplexing)。透過單一連線同時傳輸多個請求和響應,顯著降低了延遲。
  • HTTP/3 (3.0): QUIC (基於 UDP)。消除 TCP 隊頭阻塞,內建 TLS 加密,大幅減少連線延遲。

所有準備工作就緒後,瀏覽器會根據標準格式撰寫一份「HTTP 請求」。請求中包含了要獲取的資源路徑、客戶端資訊等,透過已建立的連線發送給伺服器。

請求的元數據包含在請求標頭 (Request Headers) 中,常見的標頭包括:

  • Host: 必需。 告知伺服器我們要訪問的網域。
  • User-Agent: 描述瀏覽器和作業系統的類型與版本。
  • Accept: 告知伺服器客戶端可以接受的內容類型。
  • If-Modified-Since / If-None-Match: 啟用條件式快取,詢問資源是否更新。
  • Cookie: 包含伺服器先前儲存的狀態資訊。


總結

經過這趟幕後探險,我們總算搞懂了按下 Enter 鍵之後,瀏覽器是如何一步步將簡單的網址,精確地轉換成網路上的連線與請求。

從查電話簿 (DNS),到約定暗號 (TLS),再到像聰明的廚師一樣管理快取,這一切都發生在我們難以察覺的微秒之間。下次打開網頁時,您就可以驕傲地說,您知道這背後所有的精密運作了!

留言
avatar-img
留言分享你的想法!
avatar-img
Root Design Lab
25會員
27內容數
「Root Design Lab」結合了「Root」(根源、基礎)、「Design」(設計)與「Lab」(實驗室),象徵這是一個充滿探索精神的創新平台! 我們是UXD(User Experience Design,使用者體驗設計) ,專注於設計與前端技術的發展與實踐,透過實驗與不斷精進,推動創意與技術的無限可能!
你可能也想看
Thumbnail
覺得黏在額頭上的"條碼瀏海"很阿雜嗎?日本熱銷的「KOIZUMI迷你瀏海梳」,不僅小巧便攜,更能快速加熱造型,無論是齊瀏海、空氣瀏海還是韓系碎蓋髮,都能輕鬆打理!瀏海順了,一整天心情就好了!
Thumbnail
覺得黏在額頭上的"條碼瀏海"很阿雜嗎?日本熱銷的「KOIZUMI迷你瀏海梳」,不僅小巧便攜,更能快速加熱造型,無論是齊瀏海、空氣瀏海還是韓系碎蓋髮,都能輕鬆打理!瀏海順了,一整天心情就好了!
Thumbnail
走完朝聖之路和TMB後,我發現真正能撐住長時間健行的,不只是腳力,而是那些讓生活更舒服的小物。這篇整理了我在TMB實測後覺得超好用的三樣登山神器——防水襪、肥皂袋、速乾毛巾,每一樣都讓旅程更輕鬆!
Thumbnail
走完朝聖之路和TMB後,我發現真正能撐住長時間健行的,不只是腳力,而是那些讓生活更舒服的小物。這篇整理了我在TMB實測後覺得超好用的三樣登山神器——防水襪、肥皂袋、速乾毛巾,每一樣都讓旅程更輕鬆!
Thumbnail
#maxask #惡意軟體 #瀏覽器被惡意或廣告工具綁架 URL轉址(重定向、重新導向):當使用者瀏覽A網址時,自動跳轉到B網址。 - 發生情境: 使用edge瀏覽器,使用Google搜尋引擎, 搜尋XXX關鍵字,網頁自動跳轉到maxask的搜尋介面。
Thumbnail
#maxask #惡意軟體 #瀏覽器被惡意或廣告工具綁架 URL轉址(重定向、重新導向):當使用者瀏覽A網址時,自動跳轉到B網址。 - 發生情境: 使用edge瀏覽器,使用Google搜尋引擎, 搜尋XXX關鍵字,網頁自動跳轉到maxask的搜尋介面。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U
Thumbnail
之前分享過【網路請求帶參數的方式】,開發者可以透過 URL 代入參數,來向伺服器請求特定的資源,我們當然也可以擷取 URL 的內容,來做為後續開發的判斷條件,這篇就來記錄一下,網址(URL) 和域名(Domain) 是什麼,以及如何取得網址的參數吧! 我們常說的網址連結 URL 完整名稱是 U
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
Thumbnail
授權碼模式連線流程 用戶端請求自己的伺服器。 伺服器發現用戶沒登入,就導向認證伺服器。 認證伺服器顯示授權頁面,等待用戶授權。 用戶確認授權後,授權頁面會向認證伺服器請求授權碼。 用戶獲取授權碼。 用戶將授權碼傳給伺服器。 伺服器拿授權碼向認證伺服器取得token。 應用註冊
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News