網路工作原理

網頁工作原理 提供了一個簡化的檢視，展示了你在電腦或手機上用瀏覽器檢視網頁時發生了什麼。

短期內，理解這些理論對於編寫網頁程式碼不是必需的，但不久之後你就會發現，瞭解後臺發生的事情會讓你受益匪淺。

客戶端和伺服器

連線到網際網路的電腦被稱為 **客戶端** 和 **伺服器**。它們之間互動的簡化圖可能如下所示

Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client

  • 客戶端是普通網頁使用者連線網際網路的裝置（例如，連線到 Wi-Fi 的電腦，或連線到行動網路的手機），以及這些裝置上可用的網頁訪問軟體（通常是像 Firefox 或 Chrome 這樣的網頁瀏覽器）。
  • 伺服器是儲存網頁、網站或應用程式的電腦。當客戶端裝置想要訪問一個網頁時，網頁的副本會從伺服器下載到客戶端機器上，並在使用者的網頁瀏覽器中顯示。

工具箱的其他部分

我們上面描述的客戶端和伺服器並沒有完整地說明情況。還有許多其他部分參與其中，我們將在下面進行描述。

現在，讓我們想象一下網路是一條路。路的盡頭是客戶端，就像你的房子。路的另一端是伺服器，就像你想去購物的商店。

A black-and-white photo of a person crossing a road at a crosswalk

除了客戶端和伺服器之外，我們還需要向以下內容打招呼

  • **你的網路連線**：允許你在網路上傳送和接收資料。它基本上就像你家和商店之間的街道。
  • **TCP/IP**：傳輸控制協議和網際網路協議是定義資料如何在網際網路上傳輸的通訊協議。這就像讓你下單、去商店和購買商品的運輸機制。在我們的例子中，這就像一輛汽車或腳踏車（或者你可能使用的任何其他交通工具）。
  • **DNS**：域名系統就像網站的地址簿。當你在瀏覽器中輸入網頁地址時，瀏覽器會檢視 DNS 以查詢網站的 IP 地址，然後才能檢索網站。瀏覽器需要找出網站位於哪個伺服器上，以便它可以向正確的位置傳送 HTTP 訊息（見下文）。這就像查詢商店的地址以便你能夠訪問它。
  • **HTTP**：超文字傳輸協議是一種應用程式 協議，它定義了客戶端和伺服器之間互相通訊的語言。這就像你用來訂購商品的語言。
  • **元件檔案**：一個網站由許多不同的檔案組成，這些檔案就像你從商店購買的商品的不同部件。這些檔案主要分為兩種型別
    • **程式碼檔案**：網站主要由 HTML、CSS 和 JavaScript 構建，儘管你以後會遇到其他技術。
    • **資源**：這是構成網站的所有其他內容的統稱，例如影像、音樂、影片、Word 文件和 PDF 檔案。

到底發生了什麼？

當你將網頁地址輸入瀏覽器時（在我們的類比中，這就像走到商店）

  1. 瀏覽器會訪問 DNS 伺服器，並找到網站所在的伺服器的真實地址（你找到商店的地址）。
  2. 瀏覽器向伺服器傳送一個 HTTP 請求訊息，要求它將網站的副本傳送到客戶端（你走到商店並訂購你的商品）。此訊息以及客戶端和伺服器之間傳送的所有其他資料都是透過你的網路連線使用 TCP/IP 傳送的。
  3. 如果伺服器批准了客戶端的請求，伺服器會向客戶端傳送一個“200 OK”訊息，表示“當然你可以檢視該網站！它在這裡”，然後開始將網站的檔案作為一系列稱為資料包的小塊傳送到瀏覽器（商店給你你的商品，你把它們帶回你的家）。
  4. 瀏覽器將這些小塊組裝成一個完整的網頁並顯示給你（商品到達你的家門口——閃亮的新東西，太棒了！）。

元件檔案解析順序

當瀏覽器向伺服器傳送 HTML 檔案請求時，這些 HTML 檔案通常包含 <link> 元素，引用外部 CSS 樣式表，以及 <script> 元素，引用外部 JavaScript 指令碼。瞭解瀏覽器載入頁面時這些檔案被 解析的順序 非常重要。

  • 瀏覽器首先解析 HTML 檔案，這會導致瀏覽器識別任何 <link> 元素對外部 CSS 樣式表的引用以及任何 <script> 元素對指令碼的引用。
  • 當瀏覽器解析 HTML 時，它會向伺服器傳送請求，獲取它從 <link> 元素中找到的任何 CSS 檔案，以及它從 <script> 元素中找到的任何 JavaScript 檔案，然後從這些檔案中解析 CSS 和 JavaScript。
  • 瀏覽器從解析後的 HTML 生成一個記憶體中的 DOM 樹，從解析後的 CSS 生成一個記憶體中的 CSSOM 結構，並 編譯並執行 解析後的 JavaScript。
  • 當瀏覽器構建 DOM 樹並應用 CSSOM 樹中的樣式並執行 JavaScript 時，頁面的視覺化表示會繪製到螢幕上，使用者可以看到頁面內容並開始與之互動。

DNS 解釋

真實的網頁地址並不是你在位址列中輸入以查詢你最喜歡的網站的那些友好且易於記憶的字串。它們是看起來像這樣的特殊數字：192.0.2.172。

這被稱為 IP 地址，它代表網路上的一個唯一位置。但是，它不太容易記住，不是嗎？這就是發明域名系統的原因。該系統使用特殊的伺服器，將你在瀏覽器中輸入的網頁地址（如“mozilla.org”）與網站的真實（IP）地址匹配。

可以透過網站的 IP 地址直接訪問網站。你可以使用 DNS 查詢工具 查詢網站的 IP 地址。

資料包解釋

前面我們使用“資料包”一詞來描述客戶端和伺服器之間傳輸資料的格式。這裡我們指的是什麼？基本上，當資料透過網路傳送時，它是以數千個小塊傳送的。資料以小資料包傳送有多個原因。它們有時會被丟棄或損壞，並且在這種情況下替換小塊更容易。此外，資料包可以透過不同的路徑路由，從而使交換速度更快，並允許許多不同的使用者同時下載同一個網站。如果每個網站都作為單個大塊傳送，那麼一次只能有一個使用者下載它，這顯然會使網路效率低下且使用起來不有趣。

另請參閱

鳴謝

街景照片：街景構成，作者 kevin digga。