Day 3:網路是怎麼通的(寄信比喻版)

我們每天都在用瀏覽器上網,但你有沒有想過,當你在網址列輸入 google.com 到畫面出現,這中間短短不到一秒的時間,背後到底發生了什麼事?這是 13 天轉職甄試衝刺大綱的 Day 3。

📅 前言:網路世界裡的「寄信與收信」

其實,網路運作的本質,就跟我們「郵寄實體信件」是一模一樣的!今天我們就用寄信的比喻,帶你 30 分鐘搞懂網路暢通的秘密。

⏳ 第 1～15 分鐘:輸入網址 ➔ 出現畫面的 4 大步驟

當你在瀏覽器輸入網址並按下 Enter,電腦會依序執行以下四個步驟:

[ 你輸入網址 ] → (1) 問 DNS → 拿到 IP → (2) 瀏覽器發 Request (HTTP/HTTPS)
                                                            │
[ 畫面渲染 ] ← (4) 瀏覽器解讀 ← (3) 伺服器回傳 Response (HTML/CSS/JS) ←┘

步驟 1:網域 ➔ DNS ➔ IP(查地址)

電腦在網路世界裡溝通,只認得一串由數字組成的地址,叫做 IP 地址(例如:142.250.190.46)。但人類不可能背得住這麼多數字,所以我們發明了網域(例如:google.com)。

DNS(網域系統)就像是網路界的「電話簿」或「黃頁地址簿」。當你輸入 google.com 時,瀏覽器會先跑去問 DNS:「請問 google.com 的 IP 地址是什麼?」DNS 查完電話簿後會回答:「它的 IP 是 142.250.190.46!」

步驟 2:瀏覽器發送 Request(寄出信件)

知道了 IP 地址(收件人地址)後,瀏覽器就會打包一封信,這個動作叫做發送 Request(請求)。HTTP / HTTPS 是瀏覽器與伺服器溝通的「語言格式」(HTTPS 多了 S 代表 Secure,也就是這封信有被「加密防竊聽」)。這封信的內容基本上是說:「嘿!伺服器,我想要看你們家的首頁,可以把檔案給我嗎?」

步驟 3:伺服器回傳 Response(收到回信)

位於該 IP 地址的伺服器(另一台主機)收到請求信後,會把你要的網頁檔案打包寄回去,這個動作叫做回傳 Response(回應)。回信裡附帶的包裹,就是網頁的三大基石:

• HTML: 網頁的骨架與內容。
• CSS: 網頁的衣服與外觀裝飾。
• JS(JavaScript): 網頁的動作與互動(例如按鈕點擊效果)。

步驟 4:瀏覽器渲染(拆開包裹、呈現畫面)

瀏覽器收到這堆 HTML、CSS 和 JS 檔案後,會像拼樂高一樣,把代碼拼裝成你看得懂的精美網頁畫面。這個拼裝的過程,就叫做「渲染(Rendering)」。

⏳ 第 16～25 分鐘:內網 IP 與外網 IP 的差異

在網路世界裡,IP 其實還分成了「外網」與「內網」兩種,可以用「寄信到公司」來理解:

💡 生活場景: 你在家裡用手機和筆電連同一個 WiFi。對外,你們共用同一個外網 IP(世界只看得到你們家路由器的地址);對內,路由器會分發給手機 192.168.1.10、筆電 192.168.1.11 的內網 IP,讓設備之間不會傳錯資料。

⏳ 第 26～30 分鐘:小練習與解答

試著用剛剛學到的觀念,來回答以下兩個重要的觀念問題吧!

📝 練習 1:DNS 掛了會發生什麼事?(你會卡在哪一步?)

答案:你會卡在「步驟 1(查地址)」! 如果 DNS 壞了,當你輸入 google.com 時,瀏覽器會查不到對應的 IP 地址(不知道要把信寄到哪裡),因此畫面會直接顯示「找不到伺服器/網頁無法載入」。

💡 趣味冷知識: 這時候如果你直接在網址列輸入 Google 的 IP 地址(例如 142.250.190.46),其實是可以成功開啟網頁的!因為你繞過了 DNS,直接告訴了電腦信件要寄到哪裡。

📝 練習 2:GET vs POST 的差別(用途/資料放哪)

在發送 Request(請求信)時,最常使用的兩種方法就是 GET 與 POST: