Web 是如何工作的
全球資訊網如何工作高層次地描述了您使用網路瀏覽器訪問網頁時會發生什麼，解釋了幕後發生的“魔法”，即將相關程式碼傳送到您的計算機，供瀏覽器組裝成您可以檢視的內容。
短期內，這些理論對於編寫網路程式碼並非必不可少，但不久之後，您將真正開始受益於對後臺發生的事情的理解。
注意：本文不涵蓋網路瀏覽器如何實際將程式碼渲染成網頁。這部分內容在瀏覽器如何載入網站中介紹。
| 預備知識 | 熟悉您的計算機作業系統、Web 瀏覽器和 Web 技術的基本知識。 |
|---|---|
| 學習成果 |
|
客戶端和伺服器
連線到網際網路的計算機稱為客戶端和伺服器。它們之間互動的簡化圖可能如下所示
- 客戶端是典型的網路使用者的網際網路連線裝置（例如，連線到Wi-Fi的計算機，或連線到行動網路的手機）以及這些裝置上可用的網路訪問軟體（通常是像Firefox或Chrome這樣的網路瀏覽器）。
- 伺服器是儲存網頁、網站或應用程式的計算機。當客戶端想要訪問網頁時，網頁程式碼的副本會從伺服器下載到客戶端機器，由瀏覽器渲染並顯示給使用者。
工具箱的其他部分
我們上面描述的客戶端和伺服器並非故事的全部。還有許多其他部分參與其中，我們將在下面進行描述。
現在，讓我們想象網際網路是一條道路。道路的一端是客戶端，就像您的家。道路的另一端是伺服器，就像您想從中購買東西的商店。
為了使資料來回傳輸，我們需要以下事物
-
您的網際網路連線：允許您在網際網路上傳送和接收資料。它基本上就像您家和商店之間的街道。
-
TCP/IP：傳輸控制協議和網際網路協議（TCP/IP）是定義資料應如何在網際網路上傳輸的通訊協議。這就像讓您下訂單、去商店、購買商品的運輸機制。在我們的例子中，這就像一輛汽車或一輛腳踏車（或者您沿著道路旅行的其他方式）。
-
DNS：域名系統（DNS）就像網站的地址簿。當您在瀏覽器中輸入網址時，瀏覽器會檢視DNS以查詢網站的IP地址——伺服器實際所在的地址——然後才能檢索網站（有關更多資訊，請參閱下面的DNS解釋）。瀏覽器需要找出網站位於哪個伺服器上，以便它可以向正確的位置傳送HTTP訊息（見下文）。這就像在訪問商店之前查詢商店的地址。
-
HTTP：超文字傳輸協議（HTTP）是一種應用程式協議，它定義了客戶端和伺服器相互通訊的語言。這就像您用來訂購商品的語言。請參閱下面的HTTP基礎。
-
檔案：網站由許多不同的檔案組成，就像您從商店購買的不同商品一樣。這些檔案主要分為兩種型別
- 程式碼：網站主要由HTML、CSS和JavaScript構建——網站用不同的程式語言編寫，瀏覽器會解釋這些語言並將其組裝成網頁顯示給使用者。
- 資產：這是網站上出現的所有其他專案的統稱——例如圖片、音樂、影片、Word文件和PDF檔案——這些不是瀏覽器解釋的程式碼。
注意：您可以在本課程的稍後部分，在瀏覽器如何載入網站中瞭解瀏覽器如何將這些檔案組裝成網頁。
那麼，具體發生了什麼？
當您在瀏覽器位址列中輸入網址（這在技術上是URL的一部分）時，會發生以下步驟
- 瀏覽器訪問DNS伺服器，並找到網站所在伺服器的真實地址。
- 瀏覽器向伺服器傳送HTTP請求訊息，請求伺服器將網站副本傳送給客戶端。此訊息以及客戶端和伺服器之間傳送的所有其他資料，都透過您的網際網路連線使用TCP/IP傳送。
- 如果伺服器批准客戶端的請求，伺服器會向客戶端傳送“200 OK”訊息，這意味著“您當然可以檢視該網站！它在這裡”，然後開始將網站檔案作為一系列稱為資料包的小塊傳送給瀏覽器。
- 瀏覽器將這些小塊組裝成完整的網頁並顯示給您。
DNS解釋
真實的網址（URL）並不是您在位址列中輸入以查詢您喜歡的網站的那些好記的字串。它們是特殊的數字，看起來像這樣：192.0.2.172。
這稱為IP地址，它表示全球資訊網上的一個獨特位置。然而，它並不是很容易記住，對嗎？這就是為什麼發明了域名系統。這個系統使用特殊的伺服器，將您在瀏覽器中輸入的網址（例如“mozilla.org”）與網站的真實（IP）地址進行匹配。
網站可以透過其IP地址直接訪問。您可以使用DNS查詢工具來查詢網站的IP地址。
現在讓我們查詢MDN的IP地址，並證明它指向與網址相同的位置
- 訪問NsLookup.io DNS查詢工具，輸入
developer.mozilla.org，然後點選按鈕。 - 在結果螢幕上，將IP地址（IPv4地址）複製到系統剪貼簿。
- 開啟一個新的瀏覽器標籤頁，將IP地址貼上到位址列中，然後按Enter/Return。您應該會看到MDN載入，這證明IP地址指向它。
資料包解釋
早些時候，我們使用“資料包”一詞來描述資料在客戶端和伺服器之間傳輸的格式。這裡我們指的是什麼？
當資料透過網路傳送時，它以多個稱為資料包的小塊傳送。每個資料包包含
- 一個標頭，其中包含伺服器和客戶端IP地址、資料包編號、傳輸中的資料包總數以及傳輸中使用的協議詳細資訊等資訊。
- 一個有效載荷，其中包含資料包中傳送的實際資料。
資料以小資料包傳送的原因有很多，但最主要的原因是
- 它們有時會丟失或損壞，發生這種情況時，客戶端請求丟失的資料包比請求整個檔案更快捷、更容易。
- 資料包可以沿著不同的路徑路由，使傳輸儘可能高效並減少網路變慢的可能性——尤其是當許多使用者同時請求同一資源時。資料包可能會亂序到達，但客戶端可以使用資料包標頭中的資訊來確保它們以正確的順序組裝。
HTTP基礎
HTTP使用簡單的動詞語言來執行諸如發出請求之類的操作（參見HTTP請求方法）。HTTP GET方法通常用於發出上述型別的HTTP請求。例如，請求MDN主頁可能看起來像這樣
GET /en-US/ HTTP/2
Host: developer.mozilla.org
伺服器傳送的響應可能看起來像這樣
HTTP/2 200
date: Tue, 11 Feb 2025 11:13:30 GMT
expires: Tue, 11 Feb 2025 11:40:01 GMT
server: Google frontend
last-modified: Tue, 11 Feb 2025 00:49:32 GMT
ETag: "65f26b7f6463e2347f4e5a7a2adcee54"
content-length: 45227
content-type: text/html
<!doctype html> ... (the 45227 bytes of the requested web page HTML)
完整的響應比這更復雜，但為簡潔起見，我們省略了大部分。主要部分如下
HTTP/2 200-
伺服器用於傳送響應的HTTP版本，在本例中為HTTP/2，後跟一個狀態碼，指示請求是否成功。
200表示成功。 date、expires等-
HTTP標頭包含有關響應的附加資訊（請注意，請求也可以有標頭），這些資訊提供額外資訊和/或修改其行為。
<!doctype html>等-
響應體，在本例中包含MDN主頁的HTML文件。
其他狀態碼
上面，我們遇到了200狀態碼，它表示HTTP請求成功。有許多具有特定含義和用途的HTTP狀態碼，但您只會經常看到少數幾個
URL的組成部分
從技術上講，您在瀏覽器位址列中輸入的網址構成了統一資源定位符（URL）的一部分。URL定義了網際網路上唯一資源的位置。
URL是網址加上協議：例如，如果您在瀏覽器中開啟一個新標籤頁，在位址列中輸入developer.mozilla.org，然後按Enter/Return，您將被重定向到如下URL
https://mdn.club.tw/en-US/
URL的主要部分是
https-
用於傳送請求的協議。在這種情況下，我們使用的是HTTPS，它是HTTP的安全版本，可以防止壞人在資料傳輸過程中讀取您的資料。在現代網路上，幾乎所有伺服器都使用HTTPS，因此如果您不明確包含它，瀏覽器會假定您正在使用它併為您新增。
developer.mozilla.org-
URL的域名，它表示您正在連線的伺服器的頂級位置。在這種情況下，您輸入的網址等於域名，但這並非總是如此——您可以選擇輸入更復雜的網址。請注意，
developer部分是Mozilla的mozilla.org域的子域（不同的內容區域）。Mozilla網站上還有其他託管不同內容的子域——例如，請參閱support.mozilla.org和bugzilla.mozilla.org。 /en-US/-
您正在訪問的伺服器上資源的路徑。MDN將其所有美國英語內容儲存在一個名為
en-US的資料夾中，這就是此URL所指向的。如果您的瀏覽器預設設定為偏好英語內容，那麼當您輸入
developer.mozilla.org時，您將被重定向到此URL。如果您的瀏覽器設定為偏好MDN支援的其他語言，例如法語，您將被重定向到不同的URL，例如https://mdn.club.tw/en-US/。這並非所有網站都預設可用；MDN開發人員將MDN設定為這樣，以允許人們輕鬆訪問他們喜歡的語言。
注意：URL中可以出現更多元件。有關更多詳細資訊，請參閱什麼是URL？
另見
致謝
街景照片：街道構圖，作者：Kevin Digga。