網站如何運作？從輸入網址到看到頁面

TL;DR

當你在瀏覽器輸入網址後，電腦會經過：找到網站的地址（DNS）→ 建立連線 → 要求頁面資料 → 接收資料 → 顯示在螢幕上。整個過程通常不到 1 秒！

第一步：你輸入網址

假設你在瀏覽器輸入 www.google.com。

此時瀏覽器知道：「我要去 Google」，但它還不知道 Google 的伺服器在哪裡。

第二步：DNS 查詢（找到伺服器的地址）

DNS 是什麼？

DNS（Domain Name System）就像網路世界的電話簿。

你記得的：www.google.com（人類容易記憶的名稱）
電腦需要的：172.217.160.46（實際的 IP 位址）

查詢過程

瀏覽器問電腦：「你知道 google.com 的 IP 位址嗎？」
電腦先查自己的快取（記憶）
如果沒有，就問 ISP（網路服務商）的 DNS 伺服器
DNS 伺服器回答：「是 172.217.160.46」

這就像打電話前，你要先從電話簿找到對方的電話號碼。

第三步：建立連線（TCP/IP）

現在瀏覽器知道要連到哪個 IP 位址了，接下來要建立連線。

三次握手（Three-way Handshake）

就像打電話時的禮貌對話：

瀏覽器：「喂，我想跟你建立連線」（SYN）
伺服器：「好的，我收到了，準備好了」（SYN-ACK）
瀏覽器：「收到！我們開始吧」（ACK）

連線建立完成！

第四步：發送 HTTP 請求

瀏覽器向伺服器說：「我想要首頁的內容」。

GET / HTTP/1.1
Host: www.google.com
User-Agent: Chrome/120.0
Accept: text/html

這個請求包含：

GET：我想「取得」資料（不是上傳）
/：我要網站的首頁
Host：我要找的是 www.google.com
User-Agent：我用的是 Chrome 瀏覽器

第五步：伺服器處理請求

伺服器收到請求後：

檢查：你有權限看這個頁面嗎？
準備：把 HTML、CSS、JavaScript 檔案準備好
回傳：把資料送回給你

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 12345

<!DOCTYPE html>
<html>
...
</html>

200 OK：成功！找到你要的頁面了
Content-Type：這是 HTML 檔案
Content-Length：檔案大小

第六步：瀏覽器渲染頁面

瀏覽器收到 HTML 後，開始「畫」出頁面：

1. 解析 HTML

把 HTML 標籤轉換成瀏覽器能理解的結構（DOM Tree）。

2. 載入 CSS

根據 CSS 規則，決定每個元素的樣式（顏色、大小、位置）。

3. 執行 JavaScript

讓頁面動起來（比如按鈕的互動效果）。

4. 載入圖片和其他資源

瀏覽器看到 <img src="logo.png">，會再發送新的請求去下載圖片。

5. 最終顯示

所有元素組合起來，你終於看到完整的網頁了！

時間軸（整個過程通常 < 1 秒）

0ms:    你輸入網址，按下 Enter
10ms:   DNS 查詢完成，取得 IP 位址
30ms:   TCP 連線建立完成
50ms:   HTTP 請求送出
100ms:  伺服器開始處理請求
200ms:  伺服器回傳 HTML
300ms:  瀏覽器開始解析 HTML
500ms:  CSS 載入完成，頁面開始顯示
800ms:  JavaScript 執行完成，頁面互動可用
1000ms: 所有圖片載入完成，頁面完全顯示

為什麼有時候網站很慢？

可能的原因

DNS 查詢慢：DNS 伺服器回應慢，或你的網路有問題
伺服器距離遠：伺服器在國外，訊號傳輸需要時間
伺服器忙碌：太多人同時訪問，伺服器處理不過來
檔案太大：圖片或影片檔案太大，下載需要時間
程式碼沒優化：JavaScript 寫得不好，執行太慢

進階概念（選讀）

HTTPS vs HTTP

HTTP：明文傳輸，資料可能被竊取
HTTPS：加密傳輸，更安全（現在幾乎所有網站都用 HTTPS）

CDN（內容傳遞網路）

像是在各地設立倉庫，讓用戶可以從最近的伺服器下載資料，加快載入速度。

HTTP/2 和 HTTP/3

新版的 HTTP 協定，讓網站載入更快、更穩定。

重點回顧

輸入網址 → DNS 查詢 → 建立連線 → 發送請求 → 接收資料 → 顯示頁面
整個過程涉及多個步驟，但通常在 1 秒內完成
網站速度受 DNS、伺服器位置、檔案大小、程式碼品質影響
HTTPS 讓傳輸更安全，CDN 讓載入更快

下次當你打開網站時，想想這短短 1 秒內，網路世界裡發生了多少事情！