網頁是怎麼打開的

一口氣看完整段旅程

你在瀏覽器裡輸入一個地址，按下 Enter。一眨眼，一整張做好的網頁就擺在你面前——文字、圖片、按鈕，各就各位。它感覺像是一瞬間完成的，但其實是幾位「選手」之間一場小小的接力賽，一棒接一棒地傳下去。

這場接力賽分四棒：先是你的電腦找到網頁住在哪裡，然後向對應的伺服器索取它，接著伺服器回應，最後你的瀏覽器把一切畫成你看到的頁面。我們會一棒一棒慢慢講，用大白話，從此你再也不用對著那個轉圈的載入圖示發愁了。

第一棒——找到那個地方

你輸入的地址——比如 https://example.com/about——叫做網址（URL）。把它想成一個完整的郵寄地址：它說明了要講哪種「語言」（https:// 這部分）、你想去哪個站點（example.com）、以及那個站點上具體哪一頁（/about）。它就是整趟旅程的「去哪兒」。

但網路其實看不懂 example.com 這樣的名字——它靠數字來尋路，就像電話系統需要的是號碼，而不只是一個人的名字。所以第一件正經事是一次查詢：把名字翻譯成數字。這正是 DNS 的工作，它是網際網路的電話簿。你給它 example.com，它回給你一個像 93.184.216.34 這樣的地址。

第二棒——這場對話

現在你的瀏覽器知道了伺服器的號碼，就可以去敲門、索取網頁了。它們之間講的「語言」是 HTTP——本質上就是一種禮貌、有條理的說法：「請把 /about 這一頁發給我。」你的瀏覽器發出一個請求（request），伺服器回一個回應（response）。先提問，再回答。這一來一回，就是整個網路的核心。

每個回應都蓋著一個狀態碼——一個三位數，告訴你結果如何。200 表示「給你，一切正常」。404 表示「我找了，但沒有這個名字的頁面」。500 表示「我這邊出岔子了」。你會慢慢學會把它們讀成伺服器的「心情指示燈」。

GET /about HTTP/1.1
Host: example.com

--- the server replies ---
HTTP/1.1 200 OK

一個索取 /about 的請求，以及一個表示「網頁給你」的 200 OK 回應。

你會注意到大多數地址用的是 HTTPS，而不是普通的 HTTP——多出來的那個 S 代表安全（secure）。它把整場對話裝進一個封好的信封裡，這樣和你共用同一家咖啡店 wifi 的人就讀不到你的密碼、也沒法把網頁偷換成假的。普通 HTTP 是一張誰都能看的明信片；HTTPS 是一個上了鎖的信封。永遠優先選上了鎖的那個。

第三棒——伺服器作答

那麼到底是誰收到那個請求呢？在伺服器這台機器上，有一個長期執行的程式，它唯一的工作就是守在那裡等訪客。它常常是一個守護行程（daemon）——一種安靜執行在背景、沒有視窗、只負責監聽的程式。它守在一個帶編號的「門」上，這個門叫連接埠（port，網頁常用的門是 HTTPS 的 443 連接埠），就像一棟公寓樓只有一個街道地址，卻有許多房間號。

對一個簡單的網頁，伺服器只要把一個檔案遞回來就行。但很多時候網頁需要即時資料——你的訂單記錄、今天的天氣——於是伺服器程式會去呼叫一個 API，也就是一個標籤清晰的「資料服務櫃台」。你在某個具體的端點（endpoint，一個像 /api/weather 的網址）發問，它通常用 JSON 回答——一種整潔的文字格式，電腦和人都讀得懂。

{
  "city": "Taipei",
  "temp": 28,
  "sky": "clear"
}

一個 API 端點回傳的典型 JSON 回應——一個個貼了標籤的資料盒子，很好讀。

第四棒——瀏覽器搭建頁面

回來的並不是一張網頁的圖片——而是做網頁的一份「食譜」，你的瀏覽器就是那位廚師。這份食譜由三種配料協作而成。HTML 是結構：標題、段落、按鈕，就像房子的毛胚框架。它說的是頁面上有什麼，還沒說長什麼樣。

CSS 是樣式——顏色、字型、間距，是給毛胚房刷的漆和擺的家具，讓它好看起來。JavaScript 是行為——它讓東西會動、會反應：能展開的選單、能加入購物車的按鈕、不重新整理就能更新的內容。你的瀏覽器把這三樣都讀進來，組裝成你面前這個「活」的頁面。

兩個常讓新手犯迷糊的東西

第一，網站是怎麼在不同頁面之間記住你的，讓你不必每點一下就重新登入一次？答案是 Cookie——伺服器請你的瀏覽器保管的一張小紙條，下次請求時再出示給它看。它通常只裝著一串沒有含義的 ID，伺服器一看就認出「喔，這是剛才那個訪客」。「保持登入」和你的購物車，就是靠它在一頁又一頁之間延續下來的。

第二，有時當一個頁面試圖從你所在網站之外的另一個網站抓取資料時，你會在主控台裡看到一個嚇人的紅色 CORS 錯誤。它與其說是你程式碼裡的 bug，不如說是一條安全規則：預設情況下，瀏覽器不允許 A 網站悄悄讀取 B 網站的資料，除非 B 網站明確說過「可以，我允許」。第一次碰到會覺得很煩，但它的存在是為了防止某個可疑頁面，從你已登入的另一個網站裡偷走你的資料。

小結——這場接力賽，從頭到尾

這就是整趟旅程。這裡頭沒有任何魔法——不過是四次交接，發生得比你眨眼還快，每次你打開一個頁面時都在重演。一旦你能叫出每一棒的名字，網路就不再是一個神祕的黑盒，而變成你能琢磨、能動手戳一戳、最終能親手搭建的東西。

找到地方：網址（URL）指明方向，DNS 把名字翻譯成數字。
展開對話：瀏覽器發出 HTTP/HTTPS 請求，得到一個帶狀態碼的回應。
拿到回應：一個在連接埠上監聽的伺服器程式作答，有時還會從 API 端點取來 JSON 形式的新資料。
搭建頁面：瀏覽器把 HTML、CSS、JavaScript 組裝成你最終看到的樣子。